Web application structure review

Question

I'd like to have suggestions about the structure of my web application.

What the app does:
My app receives files from about 800 scanners around my country and the users see the scanned pages into this web application, then they can organize the pages in groups, choose which one keep and which one discard, and insert some additional information to each group.
After this, another kind of user check what the first type of user has did and approve or discard each group of pages.
After that, a procedure on another server transforms each group in PDF and TIFF multi page.

After this little background to have an idea of what my web app does, this is how the files tree looks:

ajax
|- ajaxaction1.php
|- ajaxactionx.php

cache
|- xxx_xxxxxxxxxxxx.gif

css
|- style.min.css
|- font-awesome.min.css

fonts
| here there are the fonts needed by font-awesome.min.css

js
|-functions.min.js
|-main.min.js
|-jquery.x.x.x.min.js
|-jquery.x.x.x.min.map
|-jquery.lib1.min.js
|-jquery.libx.min.js

views
|-features.php
|-features.tpl

config.ini // DB configuration file
index.php // the page that is used by the application
init.php // read description below
web.config // used to restrict access to only the right files

ajax:
Folder where there are PHP scripts that are called by Ajax to perform INSERT and UPDATE queries to database.

cache:
Folder where there are temporary .gif files extracted from the scanned pages sent from the scanners to my server.
These images stay here just the time needed to process them, then them are deleted.

css:
Here are stored the only two css files needed by my web app.

js:
in this folder are stored all the JS files.
functions.min.js is a file where I declare all the javascript functions
main.min.js is where the functions are called

views:
Here I store the PHP and TPL files that are loaded by AJAX to show the requested pages.
The PHP files perform queries to DB and prepare a matrix, then the TPL files get the matrix and print the markup.

init.php: In this file I perform the connection to the database and initialize the $pdo session.
I also check that the user is correctly logged in (I use a single sign on provided by an external software to login users).
Here I also set some common PHP function used in the other PHP scripts.
This script is included in each PHP page.

I'd like to have reviews about how I've organized the files and folders of my application.

Answer 1

I'd suggest following MVC because in the current layout I don't see separation of functionalities in the code. E.g. grouping code in ajax means each file is responsible to fetch and process data (Model), presenting it to client (Controller) and formatting (View).

Edit to clarify if the current layout was already MVC like, it's not clear that it is. Looking at the .php files, you can't tell that .php files in views/ are controllers/models, but usually when using templates, only .tpl belong in views/. So to fix that, we have to keep views/*.php together with other .php in ajax/, say in src/.

If you do that, then it'd be clear that you have View in views/ and Model and Controller in src/. Then the next step is to break src/ to models/ and controllers/. This is not as easy as moving files around because you need to break up the files too. E.g. you mention that the ajax files perform INSERT and UPDATE. Those parts that do that would need to be placed in separate files and in models/. Once you removed those parts from the original files, you can put them together as controllers. This is quite rough but should make it clear enough.

So, from your current layout, I'd put and break the php files in controllers/ and model/, put .tpl files in view/ and put all other files that must be accessible by public (.js, .css, etc.) in public/. Also, put 3rd party library in a separate directory, like vendor/.

You might also want to consider using an MVC framework, which most likely will make/suggest a layout for you. Caveat I only wrote to make the php part to be MVC. As you it seems like javascript is used substantially, you can make javascript to be MVC too.

Answer 2

Your directory structure is clear and organized in a good way. It is a very good idea to organize in the way you have done.

What you could possibly do later, if needed (mostly depending on the current filesize), is to split your init.php into separate parts such as:

• functions-database.php
• functions-login.php
• functions-common.php

I have to say that I especially like the filename 'font-awesome.min.css'

Answer 3

Separation
For external dependencies (third-parties libraries), I would suggest separating them from your custom one.

Create a lib folder under css and js.
Make sure the relative image path is amended in css files if any.

css
|- style.min.css
   lib
   |- font-awesome.min.css

js
|- functions.min.js
|- main.min.js
   lib
   |-jquery.x.x.x.min.js
   |-jquery.x.x.x.min.map
   |-jquery.lib1.min.js
   |-jquery.libx.min.js

OR

js
|- functions.min.js
|- main.min.js
   lib
       |-jquery
           |-jquery.x.x.x.min.js
           |-jquery.x.x.x.min.map
           |-jquery.lib1.min.js
           |-jquery.libx.min.js

So you are less likely to edit those frameworks and libraries accidentally.

Consistency
Use either singular or plural form of noun appropriately.

Change folder cache to caches for matching the views.

Includes
As being said in another answer, in your case, modules should be separated into several files. Not only for the purpose of a clear directory hierarchy, but also for the performance and security issue.

Extra
Use images folder for storing images.

Use specific folder (e.g. data) for saving the data.

For more examples and practices, you can refer to SO: Directory Structure for MVC