How to dissociate front-end and back-end coding during a project?

0
votes

A simplified example

  • Front-end: html css

  • Back-end: php mysql

So after front-end part is ready, how would back-end part be integrated with front-end part?
Is it just like:

  1. insert <?php echo "xxx" ?> between some div tags
  2. wrap some div tags with <?php while(xxx){ ?> and <php } ?>

Another related question

How would back-end part be tested/tweaked during development, simple echo(), print() ... ?
I am not speaking of debugging, but internal presentation for programming.

The reason for asking this question:

I dont understand how things like Wordpress templates be developed, I mean, they must have a way to completely dissociate it from anything else, right? It's realy cool if their way can be applied during building a website, but I dont know how.

I may be completely wrong about the whole concept of this question, please do share your experience!

1
phphtmlbackendweb-frontend
I really like codeigniter for this, it is a model view controller framework. But they're not as separate as you seem to be thinking. The front end still relies on php, and the back end is tested using html/css. - dmgig
@dgig I know a little Joomla, and I guess it is like Codeigniter as they are both CMS. Joomla also has the so called MVC dev structure. However, while digging into it, I found the learning curve of Joomla seems a little bit high for beginners like me, then I realised that I need to know how some things work before using them with existing frameworks. - Chener
The thing about codeigniter - I think being different from Joomla, though I haven't used it - is it is not a full CMS. It is just a framework for you to build your own CMS. There is no GUI or anything like that. For small projects, it is very good, and the learning curve is not so steep if you know PHP already. But you are more or less building form scratch. - dmgig
@dgig Ye, I was kind of depressing after giving up Joomla, which let me ignored Codeigniter. To be specific: Wordpress->Joomla->Drupal->Magento->hell I wasted so much time doing nothing! Then I decided to code from scratch: HTML, CSS, PHP, MySQL -> Javascript, HTTP -> jQuery, bootstrap ... Perhaps its time to try Codeigniter. - Chener
If you are intending to code from scratch anyway, I would really recommend CI, it presents a nice way of setting things up, handles a lot of things like security and url formatting, and routing, plus really helps you get an idea of how to set up your architecture. And it has all kinds of nice libraries which make a lot of painful things much easier (think image manipulation, file uploading, things like that). Plus there are plenty of online tutorials. - dmgig

1 Answers

1
votes

I don't have much experience with Wordpress specifically, but some of the terms used for the concept you're talking about are "decoupling" and "modularization".

The idea is to have each of your parts, or modules, be more or less unaware of what your other modules are doing.

Part of this is why there are object-oriented languages like Java, C++, etc. They allow for encapsulation and modularity. Another example is the many MV* frameworks, like AngularJS, which try to give you a push towards decoupling the different aspects of your program (in this case, your web app). However, it is 100% possible to write outside those bounds; it is up to you to make sure you modularize things correctly. PHP is a good example of this; parts of it are procedural, or function-based, and parts of it support a class-based system. It depends on how you use it.

As far as decoupling front-end and back-end, and example of this might be how you go about sending data back and forth. Say you use an AJAX request when users attempt to log-in to your site. The server might return the response of 200 (success) if the user exists and the credentials are correct, or 401 otherwise. In this case, you are returning a generic response, rather than a string, like "User does not exist", which in some circumstances directly ties the server and the client together.

Same reason why many discourage the use of inline JavaScript in your elements. If you don't use inline JavaScript, you can usually just change your code in one place.

As far as applying this to a blog, you might think of it in terms of Model View Controller.

You store your blog posts, tags, comments, etc., in a database like MySQL or MongoDB. This is your Model. The data is only stored in one place.

Your templates might be your Views. Generic PHP/HTML mark-up that displays your data (extracted from your database).

Your front-end JavaScript might be your Controller, which manipulates the Views and allows the user to interact with your web application.

Each of these parts, then, only has one primary function, which helps decouple them. This allows you to, say, change your View (your HTML mark-up) without necessarily having to change 500 lines of JavaScript or having to change the structure of your database.