In this course, I was learnt about PHP (including OO-PHP by self-researching), HTML5, CSS, Javascript, JQuery and AJAX. Web programming was a bit hard to go through at the beginning since I didn't understand how things are connected together. One of the requirements in assignment 3 was about making real-time data validation (using Javascript and JQuery), which I had to take some times to read online tutorials to clear the concepts behind the scenes. The course had 3 assignments as below:
- Design and implement a web application for a cinema business.
- It's up to students to choose the tools they use to develop the app. I used Adobe Dreamweaver CS6 and Wamp Server 2.5.
- Students had to work in pairs, however I went solo in all 3 assignments.
Assignment 1: This is a very tiny assignment that only required to make a single static page that contains my student details in a section, a fixed-sized photo and 2 links that redirect to assignment 2 and 3 page.
Assignment 2: Design and implement multi-pages static site that conforms to the following requirements:
- Home Page with Head area, Navigation bar, Content area and Footer.
- Head area containing business branding with cinema logo and business name.
- Content are showing some introduction of the business with the contents determined by student.
- Footer containing student - school - course details. Students can put other info of their choice.
- A navigation bar that provides tha links to Contact Page, Booking Page, Movie Page and Timetable Page.
- Contact page containing a web form that let customers send messages in 3 types: General Enquiry, Booking Query and Complaints.
- Timetable page displaying all session times and ticket prices.
- Movie page dispaying all current movies that are selected by students, with a poster, title, description, rating...
- Booking page letting users add a movie, then select session time (seating was not considered at this stage). Total amount due will be calculated in real time and must be correct in all situations.
- All elements need to be responsive to all screen sizes (but not compulsory).
- All designs must be clear and comfortable to attract customers.
Assignment 3: Extend assignment 2 with some advanced features as below:
- All pages must be responsives to all display sizes, and will be checked by Google Mobile-Friendly Test tool.
- Redesign Movie page to display some more interesting information, including a button that allow users to add movie to Booking Cart.
- Booking Cart accepts multiple movies, then let users select available session times, then if things get through, allow for selecting available seats according to the number of customers per booking.
- Modify and extend
Javascript
and JQuery
to validate user inputs in all booking steps, and calculate total amout due correctly in all situations. - Allow for removing - updating - resetting one or multiple items in Booking Cart.
- Let users apply a Coupon Voucher in Booking Cart that matches a certain pattern, then simulate the checkout process.
- Issue booking ticket and confirmation after checkout with unique booking reference and barcode, with booking details.
After finishing this course, I understand the key concepts and theories in web development, so I can do researches to understand more in later improvement. I understand and can write Javascript
and JQuery
to validate real-time client-side inputs. This course equipped me a solid foundation to dive deeper in web development.