Overview
The first project on this portfolio. A hand coded website demonstrating a functional database and dynamically loaded content. I originally made a web project in university of a similar design where users could browse events and add new events to the site. The website would then pull the events from the database and create new content for each event to display them all on the page. This was done using php and SQL at the time.
I chose to remake this project as the hourglass library as I couldn’t find my university work but wanted to show some of the things I had learned.
For this project I ended up just using html, CSS, and JavaScript as I decided to try out using firebase as my database instead of MySQL.
Functionality
admin.html
The main function of this website is to allow the user to write and publish their own books onto the site. If the user clicks on the ‘Write book’ tab on the nav bar, they will be taken to a page allowing them to input a title and description for the new book. The user can then use the available text field to write a short story. If the user is logged in to an account, their username will automatically be entered into the ‘author’ field. Otherwise, an anonymous user can still publish a book, and can write whatever name they like in the author field.
Each book is then sent to the firebase database where it is stored with a unique key identifier, along with its title, description, content and author.
library.html
When a user clicks on the ‘Library’ tab on the navbar, they will be taken to a page displaying all of the books in the database.
To do this, I created a list object called booklist and then create a reference to the firebase database. I then used the ForEach() function to retrieve each stored book from the database and mapped each of its keys and values onto a new object in the list.
Afterwards, I use a for loop that cycles through the length of the booklist and creates a new div for each object in the list. It then uses the data for each object to display the title and description of each book. The end result is a box for each book with its title and description and when the user clicks on the box they are taken to a page in which they can read the content. This is done by passing the book’s unique key to the book page.
book.html
The ‘book’ page is a page with a simple layout that uses the unique key to pull the book’s data from the database. It will then display its title, description, author, and any other information I choose to add in future such as an image. Lastly, it will display the actual content of the book, allowing the user to scroll down and read.
login.html
As mentioned earlier, the website includes a login system. I haven’t finished this section as the last time I made this project I was using SQL and php and I knew how to hash passwords in that way already. Now that I am using firebase, the process is different and I am looking into learning about node.js so I can use the bcrypt function to hash passwords in the future. The current login system does work, it uses sessionStorage to save sessions and checks on each page whether a user is currently logged in to a session or not.
For now, there are a couple of accounts already made, one is the ‘aiGenerated’ account which I used for testing and to publish some short AI generated stories onto the site to populate it with some data.
signup.html
This page is where users can sign up a new account, but I’ve disabled it for now to not encourage anyone to signup with their passwords when I don’t have any password hashing in place.
Final note
This project demonstrates some useful functionality of dynamic content, use of a database and a login system. I wasn’t too interested in cleaning it up and make it look particularly aesthetic as I just wanted to demonstrate the coding and then move on to another project for this portfolio.