THESIS PREPARation schedule

Date of task issue: 27.10.2015

Preliminary Presentation (Predefense): 08.05.2016

The task is accepted for execution

Dean of Faculty ___________________ Assoc. Prof. Guvercin S.

(signature)

Head of Department ___________________ Assist Prof. Zhaparov M.

(signature)

Academic Supervisor ___________________ PhD A.Aipenova

(signature)

ANNOTATION

My diploma work is the website which will provide with detailed information about Kulsary city, located in Atyrau region. In this website you can find latest news of the city or around the Republic, advertisements, proclaiming, local weather forecast, list of buses which travel within the city, and also map of the place. You may also like to reserve a seat in inter-city buses on route Atyrau, Aktau.

On this website there is an administrator who develops and spreads the fresh news, announcements, and also can delete them from the website. The latest news which were loaded on the website by the administrator will be highlighted on the first row.

So, to be registered on this website oneself you should add your Name, mail address and password which must be consist more than 6 symbols.

Kulsary city, Atyrau, Aktau city bus can go. The same bus for which tickets will be reserve name card IIN e-mail attachment and choose the location of the ticket. Confirmation will be sent to your e-mail.

This web site is very convenient and can save time residents of Kulsary.

Аннотация

Моя дипломная работа является веб-сайт, который будет предоставлять подробную информацию о городе Кульсары, расположенном в Атырауской области. На этом сайте вы можете найти самые свежие новости города или вокруг Республики, рекламные объявления, провозглашая, местный прогноз погоды, список автобусов, которые путешествуют в пределах города, а также карту места. Вы также можете, как зарезервировать место в междугородних автобусах по маршруту Атырау, Актау.

На этом сайте есть администратор, который разрабатывает и распространяет свежие новости, анонсы, а также удалять их с веб-сайта. Последние новости, которые были загружены на веб-сайте администратором будет выделен на первом ряду.

Таким образом, необходимо зарегистрироваться на этом сайте, вы должны себе добавить свое имя, адрес электронной почты и пароль, который должен быть состоять более 6 символов.

Кульсары город, Атырау, Актау городской автобус может идти. Тот же автобус, на которые билеты будут резервом, для того что нужно имя карты вложения ИИН электронной почты и выберите расположение билета. Подтверждение будет отправлено на Ваш адрес электронной почты.

Этот веб-сайт очень удобен и может сэкономить время жителей Кульсары.

ТҮЙІН

Менің дипломдық жұмысым Атырау облысында орналасқан Құлсары қаласы бойынша егжей-тегжейлі ақпаратты қамтамасыз ететін веб-сайт. Бұл сайтта Құлсары қаласының және Қазақстан Республикасы бойынша жаңалықтар, хабарландыру жарнамасы, ауа райы болжамы, қала ішіндегі маршруткалар тізімі және картасы. Қала аралық автобустарға билет брондау.

Бұл сайтта өз әкімшісі болады ол жаңалықтарды хабарландыруларды салып өшіріп отырады. Сайтқа салынған соңғы жаңалықтар бастапқы бетке шығып отырады.

Бұл веб-сайтта сіз өзіңіздің жарнамаңызды салуға болады. Жарнама салу үшін сайтқа тіркелуіңіз керек ол үшін атыңызды және электрондық поштаңызды, құпия сөзіңізді жазасыз бірақ олар 6 әріптен көп болу керек.

Құлсары қаласынан, Атырау қаласымен Ақтау қаласына Автобуспен баруға болады. Сол автобустарға билетті брондауыңызға болады ол үшін аты-жөніңіз куәлігіңіздің ИИНі, электрондық поштаңызды тіркейсіз және билет орнын таңдайсыз. Сіздің электрондық поштаңызға растау жіберіледі.

Осы веб-сайт Құлсары тұрғындарына өте қолайлы және уақытын үнемдей алады.

CONTENT

Introduction.......................................................................................................... 9

1 Background....................................................................................................... 9

1.1. Google classroom........................................................................................ 10

1.2. Classmarker................................................................................................. 10

1.3. Proprofs...................................................................................................... 11

2.Technologies.................................................................................................... 16

2.1. Yii2 framework........................................................................................... 16

2.2. Composer.................................................................................................... 18

2.3. MVC............................................................................................................ 18

2.4. Configuration and migration....................................................................... 21

3. Software requirements.................................................................................... 25

3.1 Html & html5............................................................................................... 25

3.2 Css & css3.................................................................................................... 27

3.3 jQuery........................................................................................................... 36

3.4 php.............................................................................................................. 38

3.5 javascript...................................................................................................... 44

3.6 Database....................................................................................................... 45

3.7 Use case........................................................................................................ 48

4. Testing and results.......................................................................................... 51

Conclusion.......................................................................................................... 59

References........................................................................................................... 60

INTRODUCTION

Outside twenty first century, century of information and advanced technologies. People want that information necessary to them was available on the Internet. My website gives an opportunity to find all necessary and interesting information to Kulsary residents. Target audience of the website – Kulsary residents, people, whose activity or the period of life it is anyway connected with our favourite city, and also those who want to obtain more detailed information on Kulsary.
My website is information portal for inhabitants and Kulsary city visitors, we have a big reference book of the organizations, a board of free announcements, the latest news, advertizing, bookings of tickets, the phonebook, weather, the card of traffic jams,exchangerate,etc.
Also the user can learn and see the announcement in 7 different categories, such as: real estate, transport, electronics, clothes, work, services and another.

This website will be useful to residents and Kulsara city visitors. By this website residents and city visitors will save the time, finding for themselves the necessary information.

This website is the Internet portal, that is the multipurpose website which allows to use various necessary resources and helps to obtain actual and full information on several or one direction. My portal should be constantly updated, because without it it will lose the visitors and value.

Background

There have some similar works and advantages of this project relatively to other project.

NYC.GOV

The newest city website to launch in the U.S. is also one of the best. Although I'm not a fan of that new "NYC" logo, it's thankfully minimized in the new design, which features lots of real estate for images (video!), excellent type choices (Helvetica!) and great use of color (yellow!). It also has a text-only version that's optimized for emergencies, which allows for a streamlined, quickly loading site to go into effect during times when most people are likely to be accessing it on phones or slow connections.

Pay a parking ticket: At first, I didn't see any mention of parking tickets. I admit it took me a minute to see the Make a Payment section as well as the direct link on the very bottom of the homepage under "Top Requests." Shouldn't the top requests be at the... top?

Report trash on my street: "Make a Complaint" is right there on the homepage, with a dropdown menu for everything from noise to "Garbage & Graffiti."

Find a park: Culture & Recreation tab took me to a great page where one of the top results was indeed "Find a park." This page had an FAQ but could not help me find a park, it said to call 311. Another text search gave me a result that took me to the NYC Parks page, which did have the information I needed.

Chattanooga.gov

A nice tilt-shift city portrait, a logo using the city's official typeface Chatype, and a clean, clutter-free interface. This new southern center of high-tech living has ridiculously fast internet available to every home and business (one-gigabyte-per-second, faster than anywhere else in the country), so it's on-brand for them to have a nice web presence. Not a huge fan of the tiny banners with social media and other buttons on the bottom, though.

Pay a parking ticket: The search bar is so prominent it was calling out to me to use it instead of poking around in the navigation. It worked, and got me directly to the right page to pay my fine.

Report trash on my street: I was feeling confident, so I also used the search bar for my garbage query, which got me to the right page with plenty of options but the content was disorganized and poorly formatted.

Find a park: Search worked great again, taking me to a "Find Our Parks" page, with a link to a nicely annotated Google Map.

Phila.gov

Philly has lots of whitespace, double image banks and decent typography. The organization doesn't offend my eyes at all, and I like the Department dropdown on the far right. I also like how beyond the call to support education up top, the very first buttons that call out to you are Pay, then Fraud/Corruption. We know where Philly's priorities are!

Pay a parking ticket: Under the dropdown below Pay, I'm directed right to the parking authority.

Report trash on my street: If I knew that my request was covered under the 311 page, I could click on that and go over to the 311 site, where it's one of the top requests.

Find a park: There's an option for Recreation Centers which gets you onto the Parks and Recreation page but the focus is more about activities, not public space. I had to poke around to find actual parks.

A different approach can be found over in Hawaii. While it's not the official Honolulu city government website (which is not very good), this project by Code for America is maybe better than the typical site because it only answers the city's most frequently-asked questions. The answers are researched and authored by local residents (and vetted by the city, don't worry), who even get a credit for their answers. The result is a clean, simple interface that provides just enough information. But that's also the problem: Your question may not be one of the most-asked, meaning you might have to dip into the wild west of the real site.

Pay a parking ticket: My query "How do I pay a parking ticket" didn't actually return any relevant results, and the parking tab didn't have this information either. But maybe they don't have parking tickets in Hawaii because it's paradise?

Report trash on my street: Information about garbage pickup was an easy search and got me directly to the right page, with another site to reference and a phone number to call.

Find a park: No dice. Even the Parks & Beaches tab doesn't have a way to search for local parks.

Taking a page from Honolulu's stripped-down approach, L.A.'s new site for its new mayor Eric Garcetti brings a more personal approach to citizens wanting answers. It makes sense that he'd want to make it seem like the mayor is helping Angelenos, but it also helps people feel special—like they're going "straight to the top." Garcetti even implemented the #lamayor hashtag for people to complain/give ideas on Twitter and actually follows up with his own responses.

Pay a parking ticket: Yep, it's listed right there on the Help for Residents page, takes you to the old school city services page.

Report trash on my street: The closest I could get was Recycle Bulky Items, which took me to the city's sanitation department, with pretty much every trash-related category you could think of.

Find a park: A text search takes you to the parks and recreation site.

Another Code for America project is Chicago's new 311 site. It's more about a system of tools, from the site to an app to a hotline, that all work together to provide the ultimate way to request and track city services. The homepage itself isn't something to squawk about, design-wise, but it works really well (and the Chicago Works app is nicely designed). Plus there's a Service Tracker page that allows you to check the status of your request—because it really is all about follow up. And the best part is all the code is openly available for other cities to use.

Pay a parking ticket: This is too easy. On the homepage the "I want to..." prompt is just about perfect, simply slide down to Pay For and there are options to head to the parking ticket page.

Report trash on my street: Same here. Slide down to Report/File and you can head over to the Litter, Trash, Garbage page.

Find a park: Since it's a 311 site it's not exactly the best place to search for a park, but they do have a way to request a bike map.

Technologies

In this chapter used technologies, algorithms, methods, programs in project will be described. Such as: MySQL database, Composer, Yii Framework, JavaScript, CSS, HTML and PHP.

Yii framework

Yii is a high-performance modern PHP framework best for developing both web applications and APIs. Yii is a free, open-source Web application development framework written in PHP5 that promotes clean, DRY design and encourages rapid development. It works to streamline your application development and helps to ensure an extremely efficient, extensible, and maintainable end product.

Being extremely performance optimized, Yii is a perfect choice for any sized project. However, it has been built with sophisticated, enterprise applications in mind. You have full control over the configuration from head-to-toe (presentation-to-persistence) to conform to your enterprise development guidelines. It comes packaged with tools to help test and debug your application, and has clear and comprehensive documentation. Yii is the brainchild of its founder, Qiang Xue, who started the Yii project on January 1, 2008. Qiang previously developed and maintained the Prado framework. The years of experience gained and developer feedback gathered from that project solidified the need for an extremely fast, secure and professional framework that is tailor-made to meet the expectations of Web 2.0 application development. On December 3, 2008, after nearly one year's development, Yii 1.0 was formally released to the public.

It’s extremely impressive performance metrics when compared to other PHP-based frameworks immediately drew very positive attention and its popularity and adoption continues to grow at an ever increasing rate.

On October 2014 Yii 2.0.0 was released which is a complete rewrite over the previous version that was made in order to build a state-of-the-art PHP framework by keeping the original simplicity and extensibility of Yii while adopting the latest technologies and features to make it even better.

Yii is an open source, object-oriented, component-based MVC PHP web application framework. Yii is pronounced as "Yee" or [ji:] and in Chinese it means "simple and evolutionary" and it can be acronym for "Yes It Is!"

Yii started an attempt to fix drawbacks of the PRADO framework: Slow handling of complex pages, steep learning curve and difficulty to customize many controls. In October 2006, after ten months of private development, the first alpha version of Yii was released, followed by the formal 1.00 release in December 2008.

Yii 1.1 was released in January 2010 adding a form builder, relational Active record queries, a unit testing framework and more. In May 2011 the developers decided to use new PHP versions and fix architectural mistakes. This led to version 2.0 to which the first commit was made in the same month. In May 2013 the Yii 2.0 code went public, followed by the first stable release of Yii 2.0 in October 2014. The current version 2.0.7 also supports PHP7.

Features includes:

· Model-View-Controller (MVC) design pattern.

· Generation of complex WSDL service specifications and management of Web service request handling.

· Internationalization and localization (I18N and L10N), comprising message translation, date and time formatting, number formatting, and interface localization.

· Layered caching scheme, which supports data caching, page caching, fragment caching and dynamic content. The storage medium of caching can be changed.

· Error handling and logging. Log messages can be categorized, filtered and routed to different destinations.

· Security measures include prevention of cross-site scripting (XSS), cross-site request forgery (CSRF) and cookie tampering.

· Unit and functionality testing based on PHPUnit and Selenium.

· Automatic code generation for the skeleton application, CRUD applications, through the Gii tool.

· Code generated by Yii components and command line tools complies to the XHTML standard.

· Designed to work well with third-party code. For example, it's possible to include code from PEAR or the Zend Framework.

Composer

Composer is a tool for dependency management in PHP. It allows you to declare the dependent libraries your project needs and it will install them in your project for you. Let's say you are creating a project, and you need a library that does logging. You decide to use monolog. In order to add it to your project, all you need to do is create a composer.json file which describes the project's dependencies.

The problem that Composer solves is this:

· You have a project that depends on a number of libraries.

· Some of those libraries depend on other libraries.

· You declare the things you depend on.

· Composer finds out which versions of which packages need to be installed, and installs them (meaning it downloads them into your project).

MVC

Model–view–controller (MVC) is a software architectural pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user. MVC offers architectural benefits over standard JavaScript — it helps you write better organized, and therefore more maintainable code. This pattern has been used and extensively tested over multiple languages and generations of programmers.

To create a migration, you may use the "migration:make” command on CMD. The migration will be placed in your app/database/migrations folder, and will contain a timestamp which allows the framework to determine the order of the migrations. If needed, you may also specify a “--path” option when creating the migration. The path should be relative to the root directory of your installation.

View is what's presented to the users and how users interact with the app. The view is made with HTML, CSS, JavaScript and often templates. This part of your Chrome App has access to the DOM.

For example, in the above todo list web app, you can create a view that nicely presents the list of todo items to your users. Users can also enter a new todo item through some input format; however, the view doesn’t know how to update the model because that’s the controller’s job.

The controller is the decision maker and the glue between the model and view. The controller updates the view when the model changes. It also adds event listeners to the view and updates the model when the user manipulates the view.

In the todo list web app, when the user checks an item as completed, the click is forwarded to the controller. The controller modifies the model to mark item as completed. If the data needs to be persistent, it also makes an async save to the server. In rich client-side web app development such as Chrome Apps, keeping the data persistent in local storage is also crucial. In this case, the controller also handles saving the data to the client-side storage such as Filesystem API.

There are a few variations of the MVC design pattern such as MVP (Model–View–Presenter) and MVVP(Model–View–ViewModel). Even with the so called MVC design pattern itself, there is some variation between the traditional MVC pattern vs the modern interpretation in various programming languages. For example, some MVC–based frameworks will have the view observe the changes in the models while others will let the controller handle the view update. This article is not focused on the comparison of various implementations but rather on the separation–of–concerns and its importance in writing modern web apps.

To summarize, the MVC pattern brings modularity to application developers and it enables:

· Reusable and extendable code.

· Separation of view logic from business logic.

· Allow simultaneous work between developers who are responsible for different components (such as UI layer and core logic).

· Easier to maintain.

As with other software patterns, MVC expresses the "core of the solution" to a problem while allowing it to be adapted for each system. Particular MVC architectures can vary significantly from the traditional description here.

The central component of MVC, the model, captures the behavior of the application in terms of its problem domain, independent of the user interface.

· The model directly manages the data, logic and rules of the application.

· A view can be any output representation of information, such as a chart or a diagram. Multiple views of the same information are possible, such as a bar chart for management and a tabular view for accountants.

· The third part, the controller, accepts input and converts it to commands for the model or view.^[

In addition to dividing the application into three kinds of components, the model–view–controller design defines the interactions between them.

· A model stores data that is retrieved according to commands from the controller and displayed in the view.

· A view generates new output to the user based on changes in the model.

· A controller can send commands to the model to update the model's state (e.g. editing a document). It can also send commands to its associated view to change the view's presentation of the model (e.g. by scrolling through a document).