Need some guidance with a project

1

I have a project given to me by my supervisor/teacher. However i’m not sure where to start with it.

The project is a e-commerce site built from scratch. Here’s what i need to do;

  • Take items from a database and display them. I can enter the products manually to the database.
  • Shopping cart. No need for a payment system, just a fake “We’ve recieved your order” page is enough.

I know html and css but i have no idea how to display things from a database.
What do i need to learn in order to complete this project?
Also is it possible to learn and complete the project within the next 15 days or so?

2

Yes, totally possible. But what resources has your teacher given you? That’s a big, jump, but it is definitely doable, but they must have suggested some things

3

It’s an internship so he just gave me the project and told me to learn how to do it by myself. He wants something basic and functional.

He also told me that i could look at w3schools and asp.net documentation in the microsoft web site. But asp.net looks giberish to me at this point so i decided to use other technologies. I want to complete the project but i’m a bit lost :confused:

4

How I would approach this:

  1. Write an HTML page, just plain HTML (+ any styling), which is what you want it to look like. For simplicity, just a list of your products (with whatever looks good to you - images, description etc), each with a button to add the product to a cart.
  2. When you add a product, you need to store the ones added somewhere. JS is the easiest way to do this to prototype it - store IDs of products in a variable. Then when you hit “pay” or whatever, show a cart with the products.
  3. Use that list of IDs to build the list of stuff in the cart - again, will needs to use a bit of JS. Then have a submit button that just clears everything down and makes a message saying thanks for the order be printed.
  4. There is a working prototype. But the list of products needs come from a DB, and you’d maybe want to store the cart as a DB table somewhere as well. So when a user hits the product index page, it gets the products from the DB. Then when they add a product, it puts items to the cart table.
  5. This could be anything, but probably want to use a framework:

Going from nothing, and with that time constraint, I think you’re going to want some framework that does most of the hard work for you. Everything is going to look a little gibberish-ey, but some more than others: you want something that is established, fairly approachable, has lots of tutorials and a big community so you can find answers to questions. Which programming language it uses I guess isn’t enormously important if you only know HTML and CSS.

So afaics you’ve a few good options that I can suggest. There are others - PHP has Laravel (site: https://laravel.com/), there is MS’ ASP.Net, and so on, but:

JavaScript has the Express framework. JS is taught here on FCC, and you can go through the backend tutorials. It means you can ask for help here and be pretty sure you’ll get a response. There are a lot of resources: for example, this is the MDN beginners tutorial, which, with a little modification, you could change from being a library app to a shop app https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website

Ruby on Rails (site: https://rubyonrails.org/) is a fully-featured web framework and has one of the best tutorials available: https://www.railstutorial.org/book. The framework gives you almost everything needed out-of-the-box. The tutorial is for a Twitter clone, so would take a bit of work to go from there to a shop, but as far as frameworks go, RoR is fairly easy to learn and has a huge amount of documentation/tutorials/etc available.

Flask (site: http://flask.pocoo.org/) is a lightweight Python framework. The documentation is, as with RoR, superb, and it has great tutorials - here is a big one that takes you from nothing to a full web app, like the RoR one: https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world. Python is a solid choice as a beginner language.

Here is a very quick example of something at stage 3 (though with ultrabasic styling); may be helpful, may not, apologies for the code quality, hopefully, it kinda makes sense - all the logic is in the JS:

2 Likes
5

This is incredibly helpful, thank you so much. I’ll start looking into RoR and JavaScript right away.

6

Don’t bother too much about how to display things from a database. Just a hard coded json object holding data you want to show will be fine for development stage. When everything is functional you can easily switch to real database interaction. For development phase you can just use local storage for editing/adding data to json object.

My workflow to accomplish this will be:

  1. Day 1- 4 Planing phase
  • Gather content (text, images, etc)
  • Decide what technologies/libraries/frameworks to use
  • Prepare a rough layout of the site (structure/pages)
  1. Day 5-10 Implementation phase
  • Add content to the layout
  • Add styling to the pages
  • Implement javascript functionality
  • Review/Adjust/Review layout, styling, functionality
  • Ask for feedback
  1. Day 11-13 Testing phase
  • Retest all functionality
  • Make the switch to a real database
  • Test/Review/Retest your code
  • Pretest your project for a production environment
  • Make adjustments
  • Ask for feedback
  1. Day 14-15 Launching phase
  • Retest the project on a production environment
  • Make the last adjustments
  • Switch the project from development to production
1 Like
7

I think @DanCouper answer is amazing, but just in case you need another example let me provide you with a project I was building not too long ago, it’s an e-commerce website which I couldn’t finish because when I first started it I didn’t even know I was building a SPA (Single Web Application).

When I first started this project my JavaScript knowledge was very limited, in fact I was using jQuery to make things easier for me, however because I didn’t know much JS it was very tough and I have to redo things several times. But at the end, I learned a lot.

Link to the code: https://github.com/Gilbert1391/Chels
Link to the website: https://gilbert1391.github.io/Chels/

If you go to the shop section you will see what you are looking for. It’s somehow similar to @DanCouper solution, except my app was a bit more complicated and I used jQuery.

If you have any questions don’t hesitate to ask, I’ll be happy to help, this surely can help me practice as well.

1 Like
8

This is great, I will use this as a guide to build a very simple e-commerce app for my portfolio. Thank you very much.

BTW @DanCouper do you think it’s possible to keep the cart state even if I jump to another html file? I believe this will require some backend technology or build the project as a SPA, that’s why I didn’t finish.

1 Like
9

Yes, completely possible. As I say, what I put up there is extremely rough, but if you can understand the code you can build on it.

You need some way of persisting data/getting persisted data, it doesn’t matter if it’s an SPA or not.

You can go back -> front end, build the way the data is built and handled first, or go front -> back end, mock the data at first and just build UI then replace the mock with real stuff later on. Or a combination of the two.

Say go front -> back, building on what I mocked up:

Add bit by bit. The modal for the cart could be styled to cover whole page. The close could be styled as a back button instead of an “x”. Hopefully you can see the path to how it morphs to a SPA. Then you can make the back/forwards button actually work:

You can store data for the current page in local storage like @sorinr says, which means you can push stuff in to something that’s like a DB (this will be v useful for building on the cart logic)

So say you implement the above. The code is going to have gotten untidy, and there will be a lot of state to manage. For example, what happens if there are more than just a few products? You’d kinda want them paginated, maybe have categories, be filterable. You can prototype all of that, and add it to the code, but it will be getting very difficult to change anything without breaking other stuff at this point.

This is the point at which you reach for an SPA framework: someone has already been through all of the issues you’re about to face, there’s no point rehashing them. React/Vue/Angular/etc will all add a huge layer of complexity up front. But generally they make it much easier to develop the app once you get past that.

Whether or not you use a framework, by that point, the app is functional within a page. If you reload the page, it may go back to square one, (or if you store stuff locally, you can keep the state), but it still can’t actually do anything real.

You can even have user and payment logic without ever touching a backend: you can for example just not have users, and something like Stripe can give you a payment system.

For a working shop though, you’d imagine that you would want some storage system, some way to track stock. However you do it, it has to use some kind of back end - whether that is something that has already been built that you plug into (Shopify for example), or whether you build it yourself.

That’s where I’d say look at a web framework (or even a language where you can do most stuff without a framework, i.e. almost everything necessary is already built into the language’s standard library - Go for example). Express, Rails, Flask, Laravel etc etc. Just something that sits in front of a database and makes it easy for you to route requests to add stock, purchase stock etc.

You kinda build up a stack:

  • a database (a relational DB fits perfectly here, like MySQL or PostgreSQL)
  • a web framework (backend), normally going to be a package of server + some MVC thing where you have Models representing the DB interactions, Views which can be HTML templates or JSON, and controllers which match route to actions on the model and render the views in response to those (like http://mysite/products/add will POST some data and add a product to your database)
  • Maybe a front-end framework, maybe not, but basically the JS on the pages is going to be used to make AJAX requests against the routes defined in the backend framework. For product pages ect, probably fine to just have HTML pages, but adding products to a cart, you wouldn’t want to switch pages every time a user added a product, you’d just submit the user action using AJAX so the page didn’t reload.

One thing you can do as a kind of bridge is to use

Which gives you a full REST server to develop on - you represent a database with a JSON file, and you can write to and read from that file, and it automatically builds HTTP routes from it. It’s a good thing for an inbetween stage where you have a front and and you want it to talk to a back end, but you haven’t built any backend.

Note that this assumes an SPA kinda structure, where you’re requesting things via AJAX on the front end. Just having HTML pages generated from routes in backewnd framework is much easier in many ways - you don’t have to worry about JS so much.

hopefully that gives you some ideas, sorry about the braindump wall of text!