Best Practices For Organizing A Web App’s Structure

Organization of files, directories and sub-directories plays a key role in creating overall structure of the web application and making any type of code snippet to work efficiently. This is the reason why most of the developers prefer to choose pre-made coding frameworks for creating web application. The ready made coding frameworks assist the web developers to get sticken with a specific structure and code quicker and easier.

No matter a web developer uses framework or not, in either of the case, web applications needs a certain specific structure. Thus it is quite necessary for web developers to have the knowledge of the best practices for organizing a web app’s structure from the core.

Although, each developer have their own metrics and standards for how to organize a web application, even then we are dedicating this post detailing some of the common practices which can prove beneficial in organizing the overall structure of a web application. Going through this post, one will also be able to know why organizational structure can be so beneficial while creating an application. Have a look over these practices described as under:

What Files Will You Need?

The first major thing in which a developer often commit mistake in figuring out what files are needed. It is quite necessary to figure out what files are required in the web application which you are going to build, what functionality and information each file will hold in the web application, and, above all how all the files which you intend to create will work together to form the overall application.

Being a web developer before you move on to create a web application, you would keep answer of several questions such as what classes will you need, will you need other types of PHP-based scripts (e.g. for validation), how will you handle your templating system, what types of content/basic page types will your web app hold, will you be using a lot of Style Sheets, JavaScripts, or AJAX, if so, what files will you need, what will you need for admin files and many more similar questions. Once you will have understanding of all these questions, your task of web application development becomes easy.

Let us understand this with the help of an example. Let us suppose we are building a simple membership system for referral pages where members can sign up, create their profile, upload images, and send their profile link to relevant people to check out some information about their work. Then in that scenario, several points should be kept in consideration:

What types of files will be needed to set up?

index.php– our homepage that our website will first direct to
content.php– a template for all of our static content pages
memberList.php– a template for a list of members
profile.php– a template for each member’s profile to abide by
profileEdit.php– a template where members can edit their profile
style.css– will hold our styles
Images: It is here where all of the images for the design lies.
profilePics- It is the folder where all the member profile pics are saved.
uploads- It is the folder where all the member uploads will be saved
JavaScripts: Here, any JS files based on the requirement will be placed.
Member.php– This class will represent a member
MemberFunctions.php– This class will handle all the functions a member will do
Content.php– This is the class to handle the content functions

Now, depending upon the need, a developer can realize which files should be included in any project. Making a list of the file like this is considered as more comprehensive step than rearranging an entire web application.

Refining Directory Structure

Once a web developer is having a list of the files being used in the web application project, they need to further refine a directory structure for the web app. Here we are going to explain some of the basics that are often used by many of the web developers for directory structure.

It should be noted that nearly all web apps should at least have the following folders as discussed below, if independent from a coding framework. And in case if a web developer is using a framework, these types of folders are expected to present already in the framework.

Images– In any web application, there remains an “Image” folder which not only hold all images for web apps design, but also any other images that may come into the role, such as profile picture uploads, member uploads, admin images, and much more. This is really the simplest form of organizing images in any web project. A web developer can also use the directory structure containing several separate folders such as “template” folder for templates, “Uploads” for all the image uploaded by members, and many other sub-folders.

CSS– This folder holds hold all the CSS files in a web project and can be called by many names such as “styles”, “CSS”, “style sheets”, or whatever.

Classes– A web application constitute of several classes which include object representing features of the site or web application. If the classes are placed in a specific folder, it will help to keep things organized, and especially prove beneficial when there is felt need to add or delete any classes throughout the course of the web app’s existence.

Includes– This folder is also named as “inc_” or just “inc” by many of the developers ; no matter what others call it, you may call whatever you like. This file create a direct database connection and defines all of the website’s constants, like database credentials, a base URL, and so on.

So, the above explained are some of the few basic to refine directory structure. The style of work, i.e. how developer structures their code vary form one developer to another; some may choose to separate their markup from code entirely with a very specific set of rules, while many others can mix and match how their app code mingles with the design related code throughout the site. And in this way ups and down goes on in each developers work. Whatever the style of work of web developer, it should be remembered in every cases that the several files must be put under each of above explained categories in order to organize web application in an effective manner.

Finally, once the directory structure and the web application’s needs are realized, one can create a more logical structure for users when it comes to URL’s. It should be noted that the base root of any web application, always have a .htaccess file that can rewrite a website URLs. Thus, a web developer can use this file either to hide file extensions, or rework the “directory structure” for the URL to make it more user friendly. All these in turn will make the web application more SEO friendly bringing a huge visitors traffic.

Getting Specific with Functionality

Once the files and directory structure is planned, it is necessary to get specific with functionality, i.e. which files holds on what functionalities, which directory will keep what kind of information etc. Before I ever like to begin coding, I always go through each of my agreed upon files and through my directory structure, and I begin to organize what the inside of those files will look like. It is necessary to keep knowledge of the variables, and functions defined in the class and what those functions will do inside each of the classes, without actually writing out their code and so on.

For example, let us see below: Each of the class holds some specific functionality and information.

public class Member
Variables for member info
Constructor: include database connection
function setInfo()
function getInfo()
function login()
function register()
public class MemberFunctions{
Constructor: include database connection
function uploadProfilePic()
function uploadImage()
function editProfile()
function editAccountInfo()


Although ready made coding frameworks are beneficial to use in any web application project, but one of their disadvantage is that their structure may not be best suited for each application. If on one side, coding framework provide strict guidelines for structure which can be beneficial in many situations, but on the other side it include several bulky files which are not needed every time especially when small web applications are being made. Thus it is the best option to create own web application structure from scratch for which some initial planning is required as explained above. Besides framework, a properly planned structure make any sort of web app more efficient and better organized which in turn makes the application quicker.

Christiana McGee

Christiana McGee loves development and possesses specialization in converting Sketch to HTML. Associated with CSSChopper - Sketch to HTML Company, she constantly strives to serve the best, fastest and innovative solutions in a stre