Learning Web Development on Your Own

My first web-related software engineering project and how you would master web for yourself

I was an undergraduate when I first formally started doing programming. Though I had put myself out with Visual Basic making calculators, I knew nothing more. It was in my 5th semester that I got to learn web development for the first time. Freedom of choice was given for the students and I chose to make a web site to publish tech news and events. Mostly hackathons and meetups. In this article, I will share how I got myself into web development, databases, and many more.

Homepage of my web application: http://hackoverflow93.herokuapp.com/

Technologies Used

I used the PHP programming language along with the Laravel framework. Laravel framework has an inbuilt ORM (object-relational mapper) that supports relational schema creation, seeding with data, and migration through its ORM package Eloquent. Laravel also has an HTML template engine called Blade that helps to create web pages very easily.

JavaScript is an essential component of web development. Furthermore, I used PostgreSQL as the database. Though I believe I could have used a NoSQL variant, I ended up using a relational DBMS (database management system).

I also used Bootstrap as the web page styling package. This also helped me to be familiar with CSS styling and syntax.

End Objective

It is vital that we have a clear end goal for whatever the project that we plan to initiate. Although in practice a project can have multiple alterations, it is vital that we have a clear goal in a personal project that we do for learning. Hence, I formulated the following set of requirements for my project.

  • The website should be able to publish events including Hackathons and Meetups.
  • The website should contain a forum where users can post news and users can comment on them.
  • The website should have a mailing list, for which users can opt-in. Doing so they will receive emails whenever an event/hackathon is put up.

The requirements are pretty simple. Let’s progress through the project.

The Entity Relational Model

Whether a project is running on top of SQL or NoSQL, entities do exist. Therefore, it is important that we figure out what are the entities in our program and what are the roles they do have. Following is the entity relational diagram I came up with. Pardon the imperfections, I was a noob.

The Entity Relational Data Model

Basic Entities were as follows

  • Users
  • Events
  • Hackathons inherit Events
  • Meetups inherit Events
  • Other Events inherit Events
  • Forum posts

You might also notice that users table has a relationship with forum_posts table through forum_feedback activity. Events can have tags and tags can be shared across events, meetups, and hackathons. This was done so that we can quickly search through tags. For example use #iot to search for IOT events.

Sessions, migrations and password_resets tables are used for supporting login session management, database migrations, and resetting user passwords. Anyway, I ended up using social login without using passwords.

Using an ORM

In production web environments, ORMs are used and raw queries are not used unless it is necessary. In PHP Laravel this is provided through the eloquent library. We can write the schema in Laravel itself and it is very clean and secure. This is how we can define the users table.

Creating users Table

We can easily set what fields are unique and their data types. Furthermore, relationships can be built as follows.

Creating event_info Table that Refers to id Attribute in Events Table

This is how tables are created in the database. However, in order to access the data, we have to create model classes. Following is the model class for User. It has all the attributes and the fields of the User entry in users table.

User object mapping for users table.

You can see that events() hooks up the User object with Event object where the entity-relationship exists. I will not go into details since this article is only a high-level overview and motivator for budding web devs.

This is called the Model Layer, where the entitities of the system exists as OOP objects. In the MVC architecture, this has the data.

Controllers

Now that we have the entities sorted out, we have to develop a logic that entity data may be accessed/modified.

The controller in MVC architecture outlines the set of rules and methods to access Models in order to update Views

In a web project, the controllers are the web endpoints that preprocess the content for rendering. In Laravel, setting up controllers is extremely simple. Look at the following example.

EventController and viewHack function

Here this controller handles the Event requests. TheviewHack($id) function accepts the event_id to render the appropriate hackathon information. Here you can see the function calls the Event object which has a mapping to the events table with the primary key id. Finally, the function returns the appropriate view to display the hackathon information. Event information is passed onto the viewEvent view component for rendering.

However, in a web project, Controllers are not directly accessed from the HTML. They are accessed through HTTP requests that have to go through routing mechanisms. It is essential that one understands how routers work in order to develop a good website with user-friendly URLs. Let’s have a look at the following controller.

Router Entry

The above is the router entry to view an event. This is a router template string, that {type} and {id} are mapped from the URL itself. For example, the URL http://hackoverflow93.herokuapp.com/events/hackathons/308 will open event=hackathons with id=308. Check the URL, it works. Note that this router points to viewEvent function in EventController controller.

Web Pages

Web pages correspond to the View component in the web application. However, modern single-page applications follow a slightly different MVC pattern without having a tight coupling with the Model and database.

The view layer in MVC architecture corresponds to the presentation layer. It could be a desktop application window or a webpage.

Web page view

In Laravel, there is a template engine called Blade. This enables us to create templates that can obtain data from controllers and render web pages accordingly. Following is one such simple view in my project. In Laravel, we can have as many nested templates as we like. The organization of templates is flexible.

About Us Page

Here you can see, I have extended the master layout and title component. For the title component, I have passed About us as a text. Lastly, I have injected an asset showing my image.

Important Web Development Content

Middleware

Middleware corresponds to the components that rest in-between controllers and view. One good example of middleware is the authentication layer. Unauthenticated users can be blocked passed the middleware. There are many other middleware like CSRF (Cross-Origin Request Forgery) checks to ensure that the request is coming from a webpage that you have rendered.

Middleware can also be used for access control. For example, certain controllers can only be accessed to people with certain privileges. Management of cookies and redirection based on sessions can also be done through middleware. One such popular middleware is the CORS (Cross-origin Resource Sharing) middleware that validates the OPTIONS requests before any other request can be served. Read more.

SPA frameworks

Modern web development strategies focus on minimal network overhead while having responsive web pages. This is often achieved through the deployment of single-page web applications (SPA). Angular, Vue, and React are such popular frameworks. The web application itself can be an MVC application. The view contains templates and rendering logic. Controller manages the routing and authentication. The model corresponds to the data structures that are used for rendering.

The key advantage of these SPAs is that they only need to be loaded once. The rest of the processing is done at the client’s end. Only the model information is shared between server and web application. These are done through REST API requests.

Concluding Remarks

It takes huge courage to do an end-to-end project alone. However, once completed, the knowledge and experience left is invaluable. I deployed my project in Heroku and is still up and running, though no use exists.

If you’re planning to master web development follow the following steps. Try to continue no matter how hard the next steps could seem.

  • Find a project idea
  • Outline the basic requirements (you can extend later)
  • Pick the technologies (SPA/Web framework + a database of choice)
  • IMPLEMENT!
  • Try to write test cases
  • Deploy in a real server (Heroku gives free hosting)
  • Add additional features
  • Put the code in GIT (learn how to do that)
  • Improve

hope you enjoyed reading this article. Cheers!

Blogger | Traveler | Programmer PhD Scholar

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store