Planning the code of a website

I have for years been working with PHP and have built up enough knowledge to use functions, if statements, etc but still have only coded simple websites. Now I am designing a more complex website and am currently juggling everything so much that I seem to have lost myself completely and thought about how other people begin getting their projects from the basic design phase to the coding phase. So I’m hoping to get some advice, suggestions or tips on how to make this easier.

What I’m after (I think) is how do I plan how the website will work? Do I start with a ‘psuedocode’ layout to produce a basic structure? Or just work on coding the website and dealing with the issues that crop up as I go along?

Basically it’s how to organise myself to make the coding easier to develop instead of getting lost in a myriad of code that could possibly cause more problems later on down the line

Perhaps some kind of out-in method? Where I start with the largest potential issues that could occur and work my way to more specific issues?

I hope that this isn’t a too confusing post, however if you want me to clarify anything I shall try my best.

1 Like
  1. Define entities. Persons, ware, autos, points, results and so on…

  2. Modules. Common structure. Module for personal, module for sales, module for statistic.

  3. Create database.

  4. Usecases. All required usecases for any entity.

  5. Routing. Detalize p.4.

  6. Roles and privileges.

  7. Data access layer. DB-driver, ORM etc…

  8. Layout(s) and common design concept…

My main advise here would be to use “vertical slices”, i.e., cut the site up in multiple cohesive sections and make sure these sections share as little code as possible. This is to prevent a change in one section breaking something seamingly unrelated.

As for the rest of your question it’s kind of hard to say without knowing what the website will be about. Could you tell a bit more about it? Can be high over, details aren’t really important.

1 Like

Thank you both for your replies.

@igor_g: That’s helpful for how to use the database in tandem with the site and something I will certainly go through.

@rpkamp: I like the idea of the vertical slices. It makes sense to keep everything as separate as possible.

I think though I was being a little too specific. I’m not asking this question in relation to the specific website I’m working on, I’m asking in general for any project.

For (another) example which hopefully will make a bit more sense than the last one:

  • You get the idea for a website.
  • Go through going “I want it to do this, that, the other”
  • Create rough mock-ups/wireframes on how you want the website to look and to see how the final result will possibly look like.
  • ???
  • Begin coding the site.

It’s the question mark bit I’m asking about. I suppose it would maybe be like the ‘mock-up/wireframes’ as for the design, but for the code so you know how to structure it before you get into the actual coding of the project.

  • Decide what web pages you want (with regard to ease of navigation);
  • Decide what text, images, videos, maps etc need to go on each web page;
  • Decide how you are going to make each page responsive so it displays satisfactorily on anything from a small smartphone to a large monitor: perhaps using CSS Grid or CSS Flexbox;
  • Decide on the overall presentational style: colours, borders, fonts, animation etc etc etc.

Using a website builder could save you a lot of time.

Focus on providing really good information for site visitors.

I would say the ??? is where you create reusable components that can be used throughout the site to get a consistent look and feel. Having those components will make the next step easier as each page is “just” a mix and match of several components.

I usually create a common header and menu system then add the relevant menu links to blank pages.

All one has to do then is to fill in the blank pages with content :slight_smile:

Edit:

I forgot to mention a common footer with dynamic HTML, CSS validation links and a link to the Google Mobile Test site. Saves a lot of copying and pasting into the validation web pages.

Thank you all for your responses. There is a lot for me to work with now and apply to my website to make it easier to create. I know about creating re-usable components for headers, menus, footers, etc. But now I when I am coding I can think “Will this be used in more than one place?” and then I can create a reusable component for it rather than coding it and then realising after that it is something that’s going to reused. :laughing:

As with anything, don’t go overboard with it. Sometimes it really is easier to just type something out twice rather than trying to generalise it. Especially if there are “just a few little differences”.

Also, when you find that two things are the same, ask yourself if it will stay that way, and if it matters when one changes while the other doesn’t. That is, ask yourself of those things are necessarily the same or accidentally the same. For example if I have two apples and two pears that is accidentally the same. It’s very likely it’ll change over time.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.