MY TASKS Project Part – 1


In this today’s MY TASKS Project Part – 1 tutorial we are going to create a task management application that keeps track of all our tasks to be done. We will be using all that we learned till now in PHP and MYSQL as well as some new concepts. In this today’s part we are going to make a complete login and register page. The rest will be seen in next part. This project will allow us to add our lists, tasks, edit tasks etc.

Let us learn how to make it step by step.

  1. Create a new folder named mytasks in the htdocs folder which is in xampp folder located in C drive.
  2. Now open a new notepad++ document and save it as index.php in the newly created mytasks folder.
  3. Similarly, create another file called config.php in the same mytasks folder. This file will be used to store all the database credentials.
  4. Now our next task is to create 3 folders named CSS, CLASSES and PAGES in the mytasks folder to store .css files, class files and different pages needed in the application respectively.
  5. Write the following HTML code in the index.php file:
    • We have the HTML code above which forms our page structure.
    • We have head section of the page which contains a meta tag that gives additional description about the page.
    • Next link tags are used to link the .css files to our index.php page and script tags are used to link jquery files.
    • Body section contains the stuff that will be displayed on the page.
    • The body section is divided into different divisions using tags.
    • Different classes are specified for div tags and are responsible for styling them.
    • The statement

      displayes a hyperlink myTasks on the page which when clicked on takes us to the same page. This happens because the attribute href of anchor tag has # as its value.
    • Next below the myTasks hyperlink, there is a paragraph tag that contains a comment
      . In course of time we will replace this comment with a greet when the user logs in, in the application by displaying the word Hello followed by his username.
    • Next we have an un-ordered list with class = nav which contains the menu items in the menubar. For time being we have just one menuitem called Home.
    • Menuitem is given a class = active and is linked to the specified page. This Home link is linked to index.php page itself.
    • Further we see a comment
      that will be replaced with a login form.
    • Next below the sidebar comment, in the next div we have the comment . This will be replaced by the code used to show the main content of the application. That means the decision of which page to show will be taken here.
    • Next a footer is displayed containing a copywrite symbol with the text Eduonix 2013 below a horizontal line.
    • Now open the browser and type localhost/mytasks in the address bar of the browser. The index.php page will be loaded in the browser. It is shown below:

    • fig 1

  6. Now the above page requires some styling to make it more attractive and look somewhat professional.
    • So create a new file,name it as bootstrap.css and save it in the CSS folder which is inside mytasks folder.
    • Now write the following css code in it: