Introduction of Front and Back-End of Project

Content:

- Front-End

- Back-End

- Components of Webpage

Process:

The setting up of the web interface can be classified into the front-end and the back-end. The front-end of a web page is the presentation layer, the interface accessed by the user. The back-end refers to the data access layer, the database used to store information such as login information. The back-end is not accessible to the user.

The front-end of the webpage interface is mainly made up of HTML and CSS code.

HyperText Markup Language (HTML) is the standard markup language for creating web pages and web applications.  Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. In our case, our HTML code is stored on our local server, which is hosted on our Raspberry Pi. Besides from just the displaying the headers and paragraphs, HTML code was also used to create forms. Metaphorically, HTML code can be described as the skeleton of a webpage, the bare framework of the webpage.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. It is used to set the visual style of the web interface. Due to the limitations of the Apache server, we could only make use of inline and internal CSS for our project. Metaphorically, CSS code can be likened to the clothes on a skeleton (HTML). It layers over the basic framework provided by the skeleton and beautifies the external appearance of the webpage.

I learnt both HTML and CSS from an online resource, W3Schools. W3Schools is a great online resource I found which offers lessons and quizzes for several programming languages. 

For the design of the webpage, I hosted the html file on my laptop, using my browser to get a preview of the webpage. Eventually with the inclusion of PHP code, the file was saved as a PHP file, which required the use of WampServer to preview.

MySQL was used as our back-end database to store the login data upon registration. Upon entering registration information in the registration form, the registration information will be saved in the MySQL database. This information will them be retrieved for authentication at login. phpMyAdmin is used to handle the administration of MySQL databases. 

Reflection:

Learning about the various front and back-end tools of webpages has given me a new perspective on webpages. I now understand what goes into a webpage when I look at one, and can even identify some of the coding done by several webpages to achieve their particular design. Many components must perform together to achieve the resultant webpage and it is definitely no easy task to design one. With guides and online courses however, such new skills and knowledge has surely become more accessible for everyone.

Personal Development:

Online resources has definitely helped me to quickly pick up a variety of new skills in both front and back-end, as well as understanding of servers. I will definitely continue to further my learning in the different languages, not just to improve the final product but to increase my knowledge and ability too. In the Digital Age today, I believe having the knowledge of how webpages, web servers, and the internet works can bring about many benefits in different aspects such as job-searching etc.