Idea Transcript
FINAL PROJECT REPORT AN PICTURES UPLOAD AND AN E-COMMERCE WEBSITES
VGTU coordinator and supervisor: Dr. Mindaugas Rybokas and Dr. Lina Pupeikiene IUT A supervisor: Patrick Lebègue
Maxime Deroullers | Final Project | semester 4 – 2013
1
Acknowledgments First of all I would like to express gratitude to Dr. Mindaugas Rybokas and Dr. Lina Pupeikiene, my coordinator and my supervisor during these three months of training for giving me interesting projects. I liked the time who they gave me during the meetings to explain my projects, their patience and their availability. Then I would like to thank Patrick Lebègue, my tutor at University Institute Technology (IUT), to respond at all my questions during my internship and to meet me in Lithuania. Thanks to the International Relation Office (IRO) of Vilnius Gediminas Technical University (VGTU), especially Ms. Renata Vébriené, and the IRO of IUT, especially Roxana Queste, to organize my stay at Vilnius. I want to express my gratefulness to Ms. Fanny Bougenies for his advices in the field of communication and Mr. Philippe Mathieu for his SQL and web programming classes but also all my other teachers I had during my two years at the IUT. And I don’t forget to thank all my new friends in Lithuania for their assistance to integrate the Lithuanian culture.
2
Abstract There are lots of web languages programming and browsers. Now, the web developers have to know many web technologies to respond at customer needs but the browsers don’t know the same technologies or they don’t interpret in the same way. In this report, I show a solution for the cross browser programming with jquery, css, html and php. Today, it’s very important for a website to have a simple and beautiful interface but one of principal problems it’s to have the same display and interactions on all the browsers. For the server, I show the Model-View-Controller (MVC) programming because the code it’s more organized and easy to change the code.
3
Contents Page Introduction .....................................................................................................................................................5 I.
Presentation of the working environment ........................................................................................... 6 1)
Lithuania .............................................................................................................................................7
2)
Vilnius ................................................................................................................................................ 8
3)
Vilnius Gediminas Technical University (VGTU) .......................................................................... 9
II.
Presentation of my web projects .......................................................................................................... 10 1)
My web technologies ........................................................................................................................ 11
PHP ................................................................................................................................................. 11
HTML 5 – CSS 3 ............................................................................................................................. 11
JavaScript (jquery) ......................................................................................................................... 11
SQL ................................................................................................................................................. 11
2)
Application Programming Interface (API) ..................................................................................... 11
Bootstrap ........................................................................................................................................ 11
PrettyPhoto ................................................................................................................................... 14
3)
My websites....................................................................................................................................... 16
My pictures upload website ......................................................................................................... 16
My e-commerce website ...............................................................................................................20
Conclusion .....................................................................................................................................................22 Bibliography ................................................................................................................................................... 23
4
Introduction Upon completion of the degree like student in computer science at the IUT A of Lille, I have done training at the department of computer science in VGTU during three months. The projects look at the creation of a pictures upload and an ecommerce websites. For me, it’s an occasion to valorize my CV with a work in foreign country but it’s an exceptional cultural experience too. First I will present the cultural aspect of my training and after I will explain the technical aspect.
5
I. Presentation of the working environment In this part, I present Lithuania, Vilnius and VGTU where I lived during three months.
6
1) LITHUANIA
Vilnius and Lithuania location
Lithuania is a Baltic country situate in the north of Poland. There are about 3.5 millions of people in Lithuania. The official language is the Lithuanian but a big part of the population speaks good English. The capital of Lithuania is Vilnius. The climate is cold during the winter with the snow but the temperature increase quickly at the half of April with an average of 25°c.
7
2) VILNIUS
Vilnius center town
There are two different universities whose are a partnership with Lille 1 for the Erasmus student exchange program: Kaunas and Vilnius (the two main towns in Lithuania). I’ve chosen Vilnius, capital of Lithuania and also designated European capital of culture in 2009 by Council of European Union, with his city center considered as UNESCO World Heritage Site. It’s the biggest town of Lithuania with a population of about 500 000 people. Art holds indeed an important place there, with several museums and 65 churches. The most famous monuments are the ruins of Gediminas castle (14th century) and the classical cathedral of Saint-Stanislas (16th century). There are more 20 universities in Vilnius, each including many faculties, institutes and research centers. The main mean of common transport is the bus, especially trolleybus (electric bus that use overhead suspended wires).
8
3) VILNIUS GEDIMINAS TECHNICAL UNIVERSITY (VGTU)
VGTU
I was in the public VGTU, the second biggest university, with 13 000 students in 12 study programs. I have been working in the faculty of Fundamental Sciences. The VGTU campus is far from the city center (40 minutes by bus) but it’s near dormitories. The Faculty of Fundamental Sciences was established in 1993, today over 1200 students are studying there. It is composed of 10 departments, 6 laboratories and 5 teaching laboratories. The faculty employs 268 lecturers including 33 professors and 132 associate professors (it is by those numbers the biggest faculty in VGTU). They also work with bachelor, master, and doctoral students in the fields of informatics, biotechnologies, mathematics, and statistics.
9
II. Presentation of my web projects In this part, I present my two web sites and the web technologies that I use
10
1) MY WEB TECHNOLOGIES PHP For the server, I used php because it’s my prefer web language, it’s no strict and I know it very well. I used a Model-View-Controller (MVC) architecture.
MVC architecture
HTML 5 – CSS 3 I used these technologies because they are very popular and it’s very powerful (you can replace the JavaScript for the design with the HTML-CSS).
JavaScript (jquery) I used jquery to upload files or to make animations. You can make these animations with CSS but they are worse than jquery animations.
SQL I used SQL to stock the different important data in my server.
2) APPLICATION PROGRAMMING INTERFACE (API) Bootstrap Bootstrap is a sleek, intuitive and powerful front-end framework for faster and easier development. It uses CSS and JavaScript to create a beautiful and minimalist web interface whose is cross-browser. It’s a framework developed by Twitter and with an Apache license.
Header CSS Bootstrap
11
With Bootstrap, you place your elements with a CSS grid system (12 columns for bootstrap). The advantages are important because you can place very quickly and easily your elements where you want on the screen (it’s more difficult when you just program with CSS). Bootstrap implements the responsive design (it’s to create one web interface for all the screens, for example, mobile phone screens, tablet screens, computer screens).
Bootstrap grid system
Bootstrap grid system with different elements placed on the grid
Bootstrap is completely customizable with LESS (it’s a dynamic stylesheet language, LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions) but it’s difficult to modify bootstrap because there are many interactions with the different components.
12
Less code example
Bootstrap proposes many JavaScript official plugins to respond at many cases:
Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Typehead Affix
There are other plugins but they aren’t official.
Header JavaScript Bootstrap
The most popular websites developed with Bootstrap are: soundready.fm 13
kippt.com gathercontent.com jshint.com
PrettyPhoto PrettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. It is very easy to setup and very flexible if you want to customize it a bit. The script is compatible in every major browser, even IE6. It comes with useful APIs.
Header CSS PrettyPhoto
PrettyPhoto code
14
PrettyPhoto Demo
JavaScript customization code
15
3) MY WEBSITES My pictures upload website It’s an upload website (“cloud”) but it’s just for the pictures. A user can upload and delete his pictures, he can look at the pictures of other users too. An administrator can upload pictures and he can delete each picture on the website. He can promote a user to administrator. My main occupation was to adapt the html code at Bootstrap to make a design website and a pictures gallery. I needed several Bootstrap JavaScript plugin as carousel for the presentation of last pictures, dropdown for the navigator and fileupload for the pictures upload. In this project, my main problem was to upload the pictures to the server. I resolved with fileupload, it isn’t an official Bootstrap plugin but it’s a good solution to upload the pictures with jquery. The only problem for this solution, it’s the bad documentation. So, I had to search in the code to know how I could use it. But after, I could change the jquery fileupload code a little to adapt it at my website.
16
File upload View
17
File upload controller
18
I made a jquery pagination to organize the website.
Html pagination code
jquery pagination code – part 1
19
jquery pagination code – part 2
My e-commerce website It’s an upgrade of my first project, I made an e-commerce website from an upload website. You can upload items if you are an administrator. You must write the price, company name, name, description of the item. After, all the users could add it to the cart. Their cart is the only web page where the user has all the rights. I haven’t finished the project because I haven’t the rights and the API to develop a bank system. You must a demand at your bank to have an API. There are services in this website that I don’t have the time to make as a search bar and a better administrator panel. My main problem with this website is to upgrade my code. It’s difficult to adapt and reuse the code of another website for your project.
20
The cart of the e-commerce website
21
Conclusion This internship was benefit for me. I discover new cultures and new web technologies. I want to thank my Lithuanian professors to give me more freedom than in France about the projects. Now, I know a new work way whose is more representative of life in enterprise. I could use my knowledge acquired during my two years in IUT A of Lille. It’s a good experience to know my programming level. This training was very important for me because now, I’m sure to want continue in the web programming.
22
Bibliography http://twitter.github.io/bootstrap/ http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightboxclone/#prettyPhoto http://www.vgtu.lt/en http://www.wikipedia.org/ http://www.siteduzero.com http://php.net/manual/fr/index.php http://jasny.github.io/bootstrap/javascript.html#fileupload
23
Appendix
Home of pictures upload website
24
Admin interface of pictures upload website
25
Upload interface of pictures upload website
Home of e-commerce website
26
Upload interface of e-commerce website
Cart of e-commerce website
27