ISU Market. A website application for buying and selling various items in the ISU domain. ComS 309 Portfolio 2 Group 11: Chao Song & Neh Batwara

Size: px

Start display at page:

Download "ISU Market. A website application for buying and selling various items in the ISU domain. ComS 309 Portfolio 2 Group 11: Chao Song & Neh Batwara"

Pauline Haynes
5 years ago
Views:

1 ISU Market A website application for buying and selling various items in the ISU domain ComS 309 Portfolio 2 Group 11: Chao Song & Neh Batwara

2 Contents 1 Overview 1 2 New Concepts and Complexity 2 3 Creation, Analysis and Evaluation 5

3 1 Overview We worked on creating a web application for buying and selling various items on the ISU network. Our idea for this project was based on the hugely popular Facebook page called ISU Free and For Sale; this page is very popular among current ISU students where they can buy and sell items. These items can be anything varying from a lamp, furniture to even cars and bikes.this page motivated us to create a dedicated website appication where students can log in and post there items for sale with pictures, details and price of the item. Similarly students looking to buy items can log in or even use the website to check items and comment on an item to inquire about it or buy it. To build this web application we used what we learnt in class ie., Php, Javascript, MySQL database. We also used Bootstrap framework to create a well organized layout for the entire project. For this portfolio we learnt the usage of the Bootstrap framwork specifically for button styling, popup window design and the homepage slide show. The framework made it easier to style different elements of the web application and made it look more porfessional.every page of this website is dyanamic and users can create a post dynamically when logging in. The basic implemention of the website has been completed using PhP for connection with the MySQL database and switching between different pages and posting and posting and retrieving items from the database. We used a local server (Wamp or uwamp) to host the web application. Some complexities we faced for the project were dyanmically uploading images to the database that a user posts, managing the pop window with the Bootstrap framework and integrating it with the popup.js javascript to handle user actions and requests. We think we did a good job in implementing the web application particularly the navigation, styling and integration with database. We integrated what we had learnt in class and expanded it further which we believe resulted in a well finished website. Bootstrap framework really helped in professionaly stlying different elements of the website along with our own CSS file to style other elements. We do think that our project took a little more time than we had anticipated but in the end we were happy with the result. One thing that wished to accomplish was actually hosting the website on a web server but we did not manage to do this part so for now we still use it and test on a local server. We do hope to refine this webiste even further and add more features and host it on a web server. The experience with the Bootstrap framework was really helpful and useful. 1

2 New Concepts and Complexity During this project we learnt and worked on several different things. Along with what we had worked on in class we worked on using the Bootstrap framework.

4 2 New Concepts and Complexity During this project we learnt and worked on several different things. Along with what we had worked on in class we worked on using the Bootstrap framework. Bootstrap is a very popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. For the project we devided our web site into different pages and wrote PhP code for the different categories and items on the website. When the user visits the website they get three options To login, sign up or browse as a visitor. As a visitor the user does not get the option to post items for sale. They can still browse through the different items. Figure 1: Main page where user gets an option to login or browse as a visitor If the user does not have an existing account they are prompted to sign up, if they do have an existing account they are prompted to log in and their log in credentials are validated with the information saved in the database. When a user signs up their login credentials are dynamically stored in the database. When a user is signing up and the exists a user with the same username the new user is prompted that their exits a user with the same username. This has been does using a PhP echo call within the HTML script so the user is not directed to a separate page and stays on the same page until sign up is complete. A major complexity we faced was creating a dynamic popup window using the Bootstrap modal. To achive this we created a Javascript file(name popup.js) and added the fuctions we needed. Then we used the document.createelement function to create a popup submit form using the Bootstrap modal framework. he popup window form consists an option for the user to insert an item image 2

5 Figure 2: Sign up page Figure 3: Error displayed when there is an error logging in 3

6 Figure 4: Popup form using Javascript and Bootstrap modal framework whose information is stored in the database and is actually stored in an uploads folder on the localserver. The image is displaced dynamically by fetching the information from the database and retrieving it from the uploads folder. This way a pop up window is created and attached to the HTML file where we would want a popup window to show up. 4

7 3 Creation, Analysis and Evaluation We decided on creating this website application because we thought we could apply what we had learnt in class and expand it using the Bootstrap modal framework. This project was inspired from the idea of the hugely popular Facebook page ISU Free and For Sale where ISU students buy, trade and sell items. We had initially decided to just use PhP, HTML, JavaScript and our own CSS wherever needed in the project. But as we progressed with our project we realised that it would be a good idea to incorporate the Bootstrap modal framework as it would make the styling of the various elemets on the website much more easier and professional. Initially the project did not seem too hard or too difficult as we felt we were following the same concept as one of our previous labs and taking it further by adding some features. But as we progressed with the work we decided on including the Bootstrap modal framework and it took us some tme to integrate the features with our local database. We decided on the Bootstrap modal framework also because it was taking us a lot of iterations and tweaking to correct our CSS file to get the exact finish that we wanted on our elements. Considering the Bootstrap framework was a good decision as it provides the following benefits Speed of Development It allows you to not waste time on the styling elements and you could use some chunks of code that you need and do not have to manually write it to do similar logic designs. Responsiveness It helps create mobile ready websites because of its fluid grid layout which dynamically adjusts according to screen size. So in the future if we decide to host our website Iowa State students will be able to access the same features from a wide variety of different devices and we would not need to recode it to satify different requirements. Consistency We could work separately on different pages but achieve the same level of consisting in the various elements of the website due to the framework. Customizable It allows us to customize according to the requirements of our project. We have the option to use features we require for our project exactly according to our specifications. All of this helped us to customize the various elements of our website with ease and removed the worry of being consistent when we worked independently on different pages. The popup page when the user wants to post an item took us some considerable amount to figure out as it required us to integrate it with the database while getting the popup window inside the HTML doc. We feel we did a good job in adding the feature of posting an image through the popup window and made it to work dynamically with the users post. As the user posts an image and a description of an item they want to sell it is updated on the respective page according to its category. This also required us to create a separate Javascript file to handle the different attributes of the form. This project took a lot of components and files to build together and it was necessary for us to devide it into separate files for bringing modularity into the project. 5

8 Figure 5: ISU Market Screen Flow 6

9 I think we learnt alot from this portfolio. As it was open ended we took some time in deciding what we wanted to do and how we wanted to accomplish it. We decided that we would use what we had learnt in class and add to it somehow to justify the requirements of the portfolio. Both of us got to know what our strengths and weaknesses were and which areas we need to work on to become better at development. We also got experience in managing a small project in a timely manner and taking various decisions to accomplish it. Learning about a new framework and experimenting with it on the fly was also one of the important experiences about this project. We think we did a good job in taking the necessary decisions to reach our goal for the portfolio. When we faced difficulties we got help and tried to find solutions ourselves as well.alot of what we did was an extension from our PhP-ajax lab but by expanding it we got a firm hold on the concepts and we feel that it is a very important addition to our skillset. In the end we think we did a good enough job to achieve the goal for the portfolio.at the same time we believe that we could have added more features to the website. One thing that both of us believe is that we can refine our website much more and we surely want to take it ahead at this point. We could also host it on a web server so the website could actually be available for use, for this ofcourse we would need to add many more features and refine the existing ones that we have. But at the same time we consider this experience of end-to-end web development a great experience which made us recongnize a lot of things that go in the backgroud of web applications. We both feel that the content that we have learnt in this class would be highly beneficial for us in the furture and is also a great addition for our portfolio to showcase to potential employers. Our website looks a well finished project for us right now and we are excited to learn further on these concepts and apply them to use on our next portfolio for the class as well. 7

Create-A-Page Design Documentation

Create-A-Page Design Documentation Group 9 C r e a t e - A - P a g e This document contains a description of all development tools utilized by Create-A-Page, as well as sequence diagrams, the entity-relationship