MY TASKS Project Part – 2

1
3453

Today we are going to complete the remaining part of our MY TASKS project. Last time we completed the registration form and the login form. So let us finish the remaining part.

  1. To understand the procedure thoroughly we will first add some records manually in lists as well as tasks tables.
    1. So login into phpmyadmin in your browser and add the following records in lists table.
      • The records are as follows:
      • list_name list_body list_user create_date
        Work Stuff This list is for work related stuff. BradT CURRENT_TIMESTAMP
        Kids & Family This list is for kids & family activities. BradT CURRENT_TIMESTAMP

        table 1.1

      • CURRENT_TIMESTAMP indicates current date and time. We can get it by selecting CURRENT_TIMESTAMP from the box placed in front of create_date column.
    2. Now add following records in tasks table. The records are given in the table 1.2 below:
    3. task_name task_body list_id due_date create_date iscomplete
      Pick up daughter Pick up daughter from dance class. 2 18/08/2014 CURRENT_TIMESTAMP 0
      Pick up son Pick up son from soccer practice. 2 19/08/2014 CURRENT_TIMESTAMP 0
      Give presentation Present our new product to company. 1 22/08/2014 CURRENT_TIMESTAMP 0
      Client Consult Give clients a consultation 1 20/08/2014 CURRENT_TIMESTAMP 0

      table 1.2

      • In the above table zero (0) value in the iscomplete column indicates that the task has not been completed yet.
      • Now we finished entering the records manually in the tables. So now logout from the phpmyadmin tool.
  2. Now open the welcome.php page which is inside PAGES folder in mytasks folder which is in turn in htdocs folder.
    • Write the following code replacing the previous code in it. The code to be written is given below:
    • Here, the purpose of the above code is that, when the user logs in with correct username and password; he should be shown with his current added lists on the welcome page.
    • So to verify the user has logged in, we check the SESSION variable logged_in using the if statement .
    • If the logged_in variable of session has value 0, it means the session has not started.
    • At this time the general paragraph is shown to the user as shown below:
    • myTasks is a small but helpful application where you can create and manage tasks to make your life easier.
      Just register and login and you can start adding tasks.

    • But if logged_in variable of session has value 1, it means the session has started.
    • So as long as the session lasts, we have to select the list names from the database and show on the welcome page.
    • For that we have instantiated the database object $database in the statement $database = new database;
    • To fetch the lists created by a particular user we require his username, it is obtained from the username variable of session as shown below:
    • So now a select query is used to get the number of lists create by the user whose username is grabbed and stored in $list_user variable from the lists table which is in mytasks database.
    • The list names of all the fetched lists are then displayed in an un-ordered list using a foreach loop.
    • But if there are no lists available, the user is directed to the new_list page through the hyperlink Create One Now.
    • So open your browser and write localhost/mytasks in the address bar.
    • Now login using your username and password. You will see the following page with the lists created by that particular user.
    • welcome_page_with_lists
      fig 1

    • Here, we have logged in with the username and password of Brad Traversy. So we got his lists.
    • Now just click on Work Stuff link, you will get a blank list.php page as shown below:
    • blank_list_page_with_id_1
      fig 2

    • Here, you can see the address localhost/mytasks/?page=list&id=1 in the address bar of the browser. This means when we click on Work Stuff link we are directed to the list.php page and a parameter id is also passed along with it. It is the id of the selected list Work Stuff.
    • The page list.php does not display anything because it has no code in it yet.
  3. Write the following statement in list.php file which is inside PAGES folder:
    • Now reload the page, you will see the following output on list page.
    • showing_list_id_on_list_page
      fig 3

    • This is the id of list Work Stuff.
    • Now just go back on welcome page and select list Kids & Family, you will get the output as List Id: 2. Because Kids & Family list has id as 2 in the lists table. This helps to keep each list separate.
    • Let us now write the actual code in list.php page. So replace the statement with the code given below:
    • Purpose of this code in list.php page is to shown all the details of the selected list as well as the tasks assigned to it. It also provides 2 links to edit or delete the list.
    • So to deal with the selected list we need to have its id. We get it from the global variable $_GET as the id is passed as parameter from the previous welcome page. The statement used to get is shown below:
    • Next the database object $database is instantiated to fetch data from the tables.
    • A select query is written to fetch a single record that matches the id stored in variable $list_id.
    • Fetching the record, its list name and description (list body) is shown.
    • Two links Edit List and Delete List are created, that redirect to edit_list.php and delete_list.php pages respectively along with the id of the list.
    • Next we want to display all the tasks in the particular list that are not completed. So we have instantiated another database object and fired a query for the same.
    • After getting the resultset of the query we display all the tasks in an un-ordered list. These tasks are the hyperlinks which will take the user to task.php page with id as a parameter. This id is the id of the task selected fetched from the tasks table.
    • In case if there is no task, the user is directed to the new_task.php page through the hyperlink Create One Now along with list_id as the parameter.
    • Reload the page and you will see the details described above, as shown below:
    • list_page_with_list_details_and_tasks
      fig 4

    • If you click on the Give Presentation task link, you will get a blank task.php page as shown below:
    • blank_task_page_with_task_id_parameter
      fig 5

    • Here we have address localhost/mytasks/?page=task&id=3 in the address bar. This means we have been redirected to task.php page with id as a parameter with value 3. This id is the id of the selected task fetched from tasks table.
  4. In the task page we want to show the details of the selected task. So write the following code in task.php page which is in PAGES folder:
    • The purpose of above code in task.php page is to show the details of the task selected in list.php page.
    • To get the details of the selected task we need its id. It is passed as the parameter from list.php page, so we can get it through global variable $_GET as shown below:
    • Now we want to fetch the task details from database, so $database object is instantiated and a select query to fetch data of a particular task_id from tasks table is fired.
    • The single record is fetched in $row variable and the task name, its description, due date and status is displayed.
    • If the task has not yet completed, its column i.e. iscomplete has value 0 otherwise it has value 1.
    • So to display the status, we check in if—else conditional statement that whether the iscomplete column has value 1. If it has value 1 then the status is displayed as Complete, otherwise it is displayed as Incomplete.
    • Next a hyperlink Edit Task takes the user to the edit_task.php page where the user is allowed to edit the task.
    • Now reload the page and you will get the following output:
    • task_page_showing_description_of_selected_task
      fig 6

    • Here in the above figure the details of Give presentation task are shown. You can edit this record by clicking on the Edit Task hyperlink. But when you click on Edit Task hyperlink, you will be taken to a blank page shown below:
    • blank_Edit_tTask_page
      fig 7

    • The address localhost/mytasks/?page=edit_task&id=3 of the page in the address bar of the browser indicate that we have been redirected to the edit_task.php page and a parameter id with value 3 has been passed along with it. This id=3 is the unique identification number of the record in the tasks table. Due to this id we will be shown only the selected tasks record for editing.
    • This edit_task page is presently blank because we don’t have any code written in it yet.
  5. So let us write the following code to allow the user to edit the selected task.
    • Open the edit_task.php page which is inside the PAGES folder.
    • Write the following code inside edit_task.php page:
    • The purpose of the above code is to display the record of the task previously saved by user and then update the changes made by the user if any.
    • So first of all we will go through the form displayed. Go through the following code:
    • This code displays a form with various form elements required to edit the task.
    • The form transports data using the post method and the data is passed to edit_task.php page itself as stated by the action attribute of the form.
    • Next the elements such as textbox, textarea to edit task name and body respectively are used. Then a date, dropdown list and a checkbox are used to enter date, select list name and mark if completed or not. And a submit button with caption Update is present.
    • Each input element has an attribute value that displays the actual value fetched from the database.
    • These values are fetched from database using PHP. The code for it is given below:
    • Here, we get the task _id by just grabbing it from the global variable $_GET because it is passed on to from the task.php page as a parameter.
    • The $database object is instantiated and then the query to select a record that matches $task_id value is fired.
    • The query returns a single record after execution which is stored in $row variable.
    • But we also want the list names that the user in the session had declared to show them in the dropdown list. This is achieved using the following code:
    • Here, all records from table lists are selected through the select query and stored in the variable $rows.
    • These values stored in $row and $rows are then displayed in the input fields using echo statements.
    • Next if we want to make some changes in the task and then save it, we can do it using update query. The following code allows the user to update the changes:
    • The purpose of this code is to update the changes.
    • The above code executes only when Update button is pressed/clicked.
    • All the values entered in the input elements are grabbed from the $_POST variable and stored in the separate regular variables.
    • Next a $database object is instantiated and an update query to update all the fields in tasks table, where id matches the value of $task_id is fired.
    • After execution of the query, the rowCount() method is executed to see if any changes had occurred in the database tasks table.
    • If it is so, the message Your task has been updated is shown.
    • Now reload the page, you will see the following output:
    • edit_task_page_containing_form
      fig 8

    • For time being to make some changes just select the checkbox for Make if Completed field.
    • Now click on Update button, the form will have the message as shown below if successfully updated:
    • msg_obtained_when_a_task_is_updated
      fig 9

  6. Adding Add List and Add Task links.
    • We already have Home and Register links on our pages, but we want the Register link to appear only when the user is not in session. Once the session starts, only the links Home, Add List and Add Task should be visible to them.
    • To achieve this, following code is written in the index.php file. Write the following code where the link Home is defined in index.php file in the un-ordered list having class=”nav”:
    • This code displays the links on the page.
    • The link Home have to be displayed every time, so it is directly displayed without any condition.
    • Next the Register link have to be displayed only when session has not started and Add List and Add Task have to be displayed when session has started, so conditional statement if else to take decision about it.
    • So when session variable logged_in has value 0 (zero) (i.e. session has not yet stated), Register link is displayed otherwise Add List and Add Task links are displayed.
    • Just see the figure given below:
    • Add_List_&_Add_Task_links
      fig 10

    • As shown in the figure above you can see when BradT is logged in, the links Home, Add List and Add Task are visible.
  7. Now we should have pages for these Add List and Add Task links.
  8. So write the following code in new_list.php page which is in PAGES folder that will allow the user to add a new list:
    • The purpose of above code is to have a form that accepts the details of new list and inserts it in the lists table of mytasks database.
    • The code shown below displays a form to accept list details:
    • This form uses post method to transport the data and submits the data to new_list.php page itself as specified in the action attribute.
    • The input elements to accept list name and list body are present in the form.
    • These details are to be inserted in the lists table, so when the Create button is clicked all the details are grabbed from the $_POST variable and stored in separate regular variables.
    • The username of the user is extracted from the session variable username.
    • Then a $database object is declared and an insert query to insert all the details in lists table is fired.
    • After execution of the query, a lastIndexId() method is called. If it finds a new record, the message Your list has been created is shown.
    • The output of the form when you click on the Add List link is shown below:
    • Add_List_page_to_add_new_list
      fig 11

    • Now let us add a new list details as shown below:
    • Add_List_form_filled
      fig 12

    • Now click on Create button, the message will be displayed as shown in figure below:
    • message_after_creating_a_new_list
      fig 13

  9. Now write the following code in the new_task.php page which is in PAGES folder.
    • It will allow the user to add a new task for a particular list. The code is shown below:
    • The purpose of the above code is to display a form to add details of a new task and insert it into the tasks table of mytasks database.
    • The form uses post method and submits the data to new_task.php page itself as stated in action attribute of the form.
    • The input elements for accepting the task name, list name, task body and due date of the task are defined in the form. And a submit button with caption Create is present to save the task details.
    • The list names previously created by user in session are shown in the dropdown list used for selecting list name.
    • These list names are fetched from the lists table and shown in the dropdown list for selecting list name using a foreach loop.
    • The code to get the list names defined by a particular user is given below:
    • Here, we create a database object called $database.
    • This $database object is used to call the query() method that has a select query that fetches data from the lists table using the username in the session.
    • The resultset obtained after execution is stored in $rows variable and is then used later to display all the lists in the dropdown list.
    • Next, similar to Add List we are trying to insert the task details into tasks table.
    • For that, when we click on Create button the data stored in the global variable $_POST is fetched and stored in separate regular variables.
    • Then a $database object is created and a insert query to insert all the task details in the tasks table is fired.
    • After execution of the query the lastInsertId() method is called. If it confirms that a new record has been added then a message Your task has been created appears.
    • So when you click on Add Task link you will see the following page:
    • Add_Task_page_to_add_new_task
      fig 14

    • Now fill the form as shown below:
    • Add_Task_form_filled
      fig 15

    • Now after filling the form click on Create button. You will get the message shown in the figure below:
    • message_after_creating_a_new_task
      fig 16

  10. We completed all pages needed to create a list/task, edit list/task etc. Now if we want to delete an entire list, there should be a code to delete the list.
    • So just open the delete_list.php page which is in the PAGES folder and write the following code inside it:
    • When we click on any previously created list on Home page, a page opens which gives details about the list.
    • This page has a link Delete List which takes the user to delete_list.php page and allows him to delete the list.
    • When the user is redirected to delete_list.php page from list.php page, it carries the list_id with it.
    • As this list_id has been passed as the parameter, it is stored in the $_GET variable.
    • This id is then fetched and stored in the regular variable $list_id.
    • Then a $database object is instantiated and a delete query to delete the record from the lists table containing the value of $list_id variable is fired.
    • After execution of the query a rowCount() method is called. If its value is found greater than zero (0), we are directed to the index.php page with parameter msg saying listdeleted. And as the application is refreshed, the deleted list is not seen on the Home page.
    • Now let us delete the Shop Management Project list created previously.
    • So click on the Shop Management Project link on the Home page shown below:
    • Home_page_with_shop_mgmt_project
      fig 17

    • Now when you click on the Shop Management Project link, the following page will appear:
    • Details_of_Shop_mgmt_project
      fig 18

    • You can see id=6 in the address bar of the browser; this id is the id of Shop Management Project list in the lists table.
    • Now click on the Delete List link in the page shown in fig 18, the Shop Management Project list will be deleted from lists table and we will be redirected to refreshed index.php page as shown below:
    • index_page_with_deleted_Shop_mgmt_Project_list
      fig 19

    • Here we know that our Shop Management Project list has been deleted.
    • Thus we finished developing all things in our MY TASKS application.
  11. Just a short overview on How to run the application?
    1. If you are a new user, register yourself by filling the registration form first.
    2. Login into the application using your username and password.
    3. If you want to add a new list, you can click on the link Create One Now or if you are not a new user you can click on the Add List link.
    4. You will get a form to add list details. Add the details, suppose you are making a list with name Fun; fill in the details and click on Create button, your list will be created.
    5. Now for a new user to create a task for the list created called Fun, click on Fun; you will get a new page having a link Create One Now. Just click on that link and fill in the details for the new task in the form that appears and click on Create button. Your task will be created.
    6. For an old user you can just click on the Add Task link to create a new task for a particular existing link.
    7. You can check the task by clicking on Fun list, then on the task say Concert and get all the details about it. You can even edit the task by clicking on Edit Task link and update it. If the task is completed you can even mark it as completed.
    8. To delete a complete list you can use the Delete List link shown in figure 18 above.

Thus we successfully completed our MY TASKS application in this MY TASKS Project Part – 2.

1 COMMENT

  1. I’m amazed, I have to admit. Seldom do I come across
    a blog that’s equally educative and entertaining, and let me tell you,
    you’ve hit the nail on the head. The issue is something
    that too few people are speaking intelligently about.
    I’m very happy that I stumbled across this in my hunt for something concerning this.

LEAVE A REPLY

Please enter your comment!
Please enter your name here