Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jenny Swift
21,999 Pointshow to save content added by user
Hi, I'm playing around trying to make a to do web app, and I have two divs, one with the id "button" and the other with the id "list", as well as a text input. And here is my code that means when I type into the text input and click the button, I get a list of the things I typed, and when I click on something in the list, it is removed.
$("#button").click(function(){
var toAdd = $("input[name=item]").val();
$("#list").append('<div class="item">' + toAdd + '</div>');
});
$(document).on("click", ".item", function(){
$(this).remove();
});
But every time I refresh the page the things I entered into my to do list are lost, and I have to start over. So I am wondering how I could refresh the page without losing my data, like other web apps, e.g Evernote, Workflowy, or I guess any web app where you have an account and you can leave the page and come back to it and it is the same as you left it. Can anyone tell me please?
2 Answers
dxoxiifezd
19,729 PointsThat is a program in JavaScript, so, you are programming the client-side. If you want to keep the data then you need to create a database in the server-side and use php or other server-side language.
Jenny Swift
21,999 PointsThank you Francisco!
Jenny Swift
21,999 PointsJenny Swift
21,999 PointsOkay, thanks. Could you give me an example of what that might look like in php please, or do you know if Treehouse covers this in any video lessons?
dxoxiifezd
19,729 Pointsdxoxiifezd
19,729 PointsI think treehouse don't covers it directly, but you can learn how to do it.
First, complete the php lessons 'Build a simple php application' and 'Enhancing a Simple PHP Application', where you will learn the basics of php and how to configure a local php/apache/mysql server. Then go through 'Using PHP with MySQL', this lesson explains how to connect your php code with a database. The database is where you will keep the data that users introduce in your web. If you need to learn more about SQL go to 'Database Foundation' lesson.
After that, you are ready to do your web without javascript, just php, html and css, and using a database. Try it, but don't delete your javascript code because you will need it later.
If you want to do it with jquery you will need to use ajax to connect the database and save the data when the user introduces an element to the list. Watch the video of the forum 'The basics of PHP and AJAX using jQuery', that video introduces how to do it.