noteboard.
Back-End Web Development
![Noteboard project mockup](/../images/noteboard/noteboard-mockup.jpg)
Overview 📍
This was an academic project created for a web scripting course at BCIT. The goal was to create a note-taking web app to learn C.R.U.D. and login/signup functionality.
Tools Used ⚙️
- PHP
- MySQL
- Tailwind CSS
- jQuery
- Photoshop
Explorations
This project was my first encounter with back-end development. My key areas of learning included:
- Databases
- C.R.U.D.
- GET & POST requests
- Login/Signup
- Project Deployment
Databases
I learned how to setup a MySQL database using phpMyAdmin, and created a table with the columns id
, name
, body
, and course number
to store notes. A db_connect()
function was then used to connect my PHP application to the database, and a Notes
Class was created to manage individual notes.
C.R.U.D.
SQL statements were used to Create, Read, Update, and Delete notes in the database:
INSERT INTO
was used to add new note entriesSELECT
was used to extract specific notesUPDATE
was used to edit notesDELETE FROM
was used to remove notes
GET & POST Requests
The form
element was used to create forms for users to input data. The action
attribute was used to specify where the form data would be sent, and the method
attribute was used to specific the HTTP method used to send the form data.
I learned that the GET
method is used to pass data from a server through the url, while the POST
method submits data via the request, and is therefore safer for sending sensitive data.
Login/Signup
A new table was created in the database to store user data, and a foreign key was added to link the note entries with the users who created them. A User
and Session
Class were also created to manage user data.
Password hashing was used to keep user passwords secure, and the jQuery Validation Plugin was used for client-side validation.
Final Steps
Once all the functionality was in place, I made final UI adjustments to the Tailwind CSS styling before deploying the project to a subdomain hosted on Namecheap. A new MySQL database was also created for the live project. Finally, a Photoshop template was used to display a mockup of the web app.