Creating a login system

We now have a simplistic user interface to work off, the next thing to do was to create some sort of method where the user could log in and submit data to the database. As a recap to the function of the web app, we must create an experience where all users can read. People who decide to sign up to the web apps services will be able to read and write data.

Lets begin:


As we can see from the screen shot above, I have coded in PHP to see if a session is currently running. If the session “user” is running (they’re logged in) then the web app will display a “Hello user” message and a button to logout. When the user clicks the ‘sign in’ button, it will trigger a jQuery function where a drop down box will appear using an animation method:


To accomplish this effect we can study the javascript code below:


Obviously, the javascript would not work without the CSS id’s (login-trigger and login-content). Here is the CSS of the logging in method:


For the user to be able to login in using their specific username and password we must create some php code that communicates with the SQL database. If the username and password match, then the SQL database will select the data from the ‘user’ table and display a message. If the user types in something wrong then an error message will be displayed:



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s