MiniProject-CSS

The “Institute of Current Students” Website (web based application) is useful for the students, faculty, guest who likes to display result as well schedules of examination and all that task like event, news, students can find out list of fresh courses offered by them and admission procedure, discussion forum, fee structure etc. without going to institute. It provides the facility to the students or guest to have complete information about the institute. In this website, does not need to perform papers work likes to make result sheet on papers and then put on the notice board. But on this site just go to the database and update the result and other information. “Institute of Current Students” is a web enabled project with client server application. This website is an initiative to take all the academic and administrative processes of the Institute for IT backbone. This Project is purely web-based that can be accessed from any part of the world with the help of any standard web browser and a working internet connection. “Institute of Current Students” is an automation system which is used to store the information of Institute, faculty, student, exams, and results in the Institute database. Starting from registration of a new student in the institute, it maintains all the details regarding the details about the student and marks of the students. We can also call institute as “Institute Information Centre”. Institute Information Centre provides a solution of all problems in the form of easy to configure and use application by automating all the functionality. To make this website work successfully I shall be using some latest technology such as BOOTSTRAP FRAMEWORK for designing, PHP as the Development Platform and MYSQL as the Database Management environment.

I'm Jubayer Riyad Web Design and Developer. I am very passionate and dedicated to my work. I have acquired the skill and knowledge necessary to make your project successful. If you choose me I will give my best to make you happy with my work.

I'm Jubayer Riyad Web Design and Developer. I am very passionate and dedicated to my work. I have acquired the skill and knowledge necessary to make your project successful. If you choose me I will give my best to make you happy with my work.

The goal of the application is: * To make it easier for golfers in cities to find a golf course near their location * To create a broader experience when booking tee times, not only pick a time, but also to read more about the golf course itself. The users goals are: * To easily find a tee time close to a big city. ## UX #### Ideal users are: * English speaking * Golfer * Living in/visiting Stockholm, Gothenburg or Malmö #### Users are searching for: * An application where they can browse golf courses in their area or big cities in Sweden * An application where they easily can book a tee time on the golf course of their coice #### This application make it easy for users to share and gain inspiraton because: * It is intuitive and easy to use * It contains only neccesary features, thus reaching the statement above * The application provides filter functionality which makes it easier for the user to find what they want #### User stories * As a new user I want to create an account to be able to book a tee time * As a user I want to get a brief information of each golf course (location, price, course description) * As a user I want to be able to view all courses in my area * As a user I want to be able to sort golf courses on rating, green fee price * As a user I want to see the available tee times when trying to book * As a user I want to pay my greenfee right after booking the tee time. * As a returning user I want to see what tee times I have booked and cancel or reschedule them. #### Balsamiq mockups To see the initial wireframes for the application click <a href="static/media/wireframes/big-city-golf-firstdraft.pdf" target="_blank">here</a> ## Featureas ### Navigation bar and footer <img src="static/media/demo/demonavbar.png" alt="Demonstration navbar" style="max-height:300px;"> On the top of the website we find a fixed navbar which conotains the optons "Home", "Courses, "About" and "Login/Signup". If the user is logged in the option "Profile" will appear which takes the logged in user to their profile page. If the user have a tee time in their 'shopping bag' the option "Pay greenfee" will appear on the top right. If the user us logged in, the "Login/Signup" button is changed to "Logout". The footer is a mirror of the top navbar but in a simpler format. The footer do not include the login buttons, profile option or the pay greenfee button. In the footer we also find a all rights revserved statement. ### Home page <img src="static/media/demo/demohomepage.png" alt="Demonstration hompage" style="max-height:300px;"> The home page is a clean page with little information and plenty of space between the different objects on the page. A welcoming video of a group of golfers is autoplaying and a short statement is presented next to it. Another button for signing up is added below the statement which is exhange for a "find tee time" button if user is logged in (which redirects the user to the courses page). further down on the page we find some quotes why golf is good for stress releif and a short presentation about the application. On the button of the page another golf picture with the button for searching the courses is presented. ### Courses page/Course detail page <img src="static/media/demo/democourses.png" alt="Demonstration courses" style="max-height:300px;"> On the courses page the user find all the courses in the database. The user can choose to sort the courses based on rating, price or location. The user can also search for a golf corse by passing in text in the input field. For each course a picture, price and rating is presented. The user can choose to read more about the specific course or book a tee time right away. If the user click "read more" the user is sent to a course detail page which include more detailed information about the specific course. If the user click book tee tinme, a modal pops up for the specifc course and the user then need to pass in what date and time he/she want to play. When the booking form is completed the user get redirected to the checkout page to complete their payment. ### Pay greenfee page <img src="static/media/demo/demopay.png" alt="Demonstration checkout" style="max-height:300px;"> The pay greenfee page (or the checkout page) is displaying the tee times the user want to book/pay for and the payment form (the information needed for passing the purchase to Stripe) If the payment form is completed correctly the user is redirected to their profile page. ### Profile page <img src="static/media/demo/demoprofile.png" alt="Demonstration profilepage" style="max-height:300px;"> On the users profile page, the user can see all the teetimes they have purchased and their profile information. The profile infomration is editable by using the presented form. For every booked tee time there is a delete tee time button. If clicked, a warning message appear which the user need to accept in order for the deletion of the tee time to be successful. ### About page The about page is a simple page whit a Big city golf logo and some statements what the 'company' stands for and wish to provide. ### Database <img src="static/media/demo/demodatabase.png" alt="Demonstration database" style="max-height:300px;"> The database used in development mode is sqllite3 and in Heroku PostgreSQL. The database has a hierarchical structure where UserProfile is dependent on User, Courses of Districts and so on. ## Existing features * Navigation bar - Collabsable when screen size is below 993 pixels, different options depending if user is logged in or not * Login functionality - Fully functional login and user registration process * CR(U)D - Users are able to upload, read and delete content in the database. * Sorting - Users are able to sort through golf courses. * Stripe payment functionality ## Features left to implement * Comments - to make the application more interactive a commenting functionality would be neccesary * A date time picker to make the choice of tee time simpler. * Webhooks to secure the Stripe payment functionality ## Technologies used * The website was built using HTML5 and CSS3. * JavaScript was used to build an interactive webpage and to connect to an API. * Python was used to build the structure and functionality of the back end. * Django was used as the framwork to make the development of the application more simplistic. * [Heroku](https://www.heroku.com/) was used to deploye the live version of the application. * [Bootstrap](https://www.bootstrap.com/) was used as a library for design and layout. * The website as built and developed using [GitPod](https://www.gitpod.io/) as IDE. * The logotype was created using [LogoMakr](https://logomakr.com). * [W3C's HTLM Validator](https://validator.w3.org/) were used to validate the websites HTML code. * [W3C's CSS Validator](https://validator.w3.org/) were used to validate the websites CSS code. * [JSHint](https://jshint.com/) were used to validate the websites JavaScript code.