Кейс “Веб разработка”

Сборник упражнений, и примеров для развития навыков web-программирования через решение сценарных задач.
Подкейс HTML (Hyper Text Markup Language)

The company “High Rise” is successfully engaged in the hotel business and has its own website. Apartments in the hotel are divided into classes: “luxury”, “junior suite” and “economy”. The main menu of the site contains links to get detailed information about the structure of the company and its employees, including contact details and customer reviews. The main page of the site contains images of the interiors of each class of apartments, as well as news and promotions of the hotel. The company’s management decided to implement a system of registration and booking of apartments on the website. The apartments are numbered from 100 to 1010, with 11 rooms on each floor. When booking, you must provide the customer’s room number, name and ID of the customer’s ID card, as well as the customer’s valid email address. Customers can check in at any available room available for booking. The registration data must be entered in the database. In the personal account of the administrator, the information should be displayed in the form of a table in a sorted form, and to search for information about the client, the administrator should use an effective built-in form on the site for quick navigation. When booking, a prepayment is accepted, which is 25% of the price of the selected apartment class. After the booking is completed, the customer is sent an electronic receipt with the booking confirmation to the email address specified during registration.

Компания «Highrise» успешно занимается гостиничным бизнесом и имеет собственный вебсайт. Апартаменты в гостинице делятся на классы: «люкс», «полулюкс» и «эконом». В главном меню сайта размещены ссылки для получения подробной информации о структуре компании и ее сотрудниках, в том числе контактные данные и отзывы клиентов. На главной странице сайта представлены изображения интерьеров каждого из класса апартаментов, а так же новости и акции гостиницы. Руководство компании решило внедрить систему для регистрации и бронирования апартаментов на сайте. Апартаменты пронумерованы от 100 по 1010, по 11 номеров на каждом этаже. При бронировании должны указываться номер комнаты, имя, и идентификатор удостоверения личности клиента, а так же действующий адрес электронной почты клиента. Клиенты могут регистрироваться в любых свободных номерах, доступных для бронирования. Данные о регистрации должны записываться в базу данных. В личном кабинете администратора, при запросе, информация должна выводится в форме таблицы в отсортированном виде, а для поиска информации о клиенте, администратор должен использовать эффективную встроенную на сайте форму, для быстрой навигации. При оформлении бронирования принимается предварительная оплата, которая составляет 25% стоимости от выбранного класса апартаментов. По завершению бронирования, клиенту отправляется электронный чек, с подтверждением бронирования, на указанный при регистрации адрес электронной почты.

 

Скачать или редактировать эту презентацию

Система интерактивных вопросов с автопроверкой

HTML пример для простого меню (карта сайта)

HTML пример для простой формы (форма бронирования)

HTML пример для простой таблицы (забронированные номера)

Подкейс CSS (Cascading Style Sheet)

The company “High Rise” is successfully engaged in the hotel business and has its own website. Apartments in the hotel are divided into classes: “luxury”, “junior suite” and “economy”. The main menu of the site contains links to get detailed information about the structure of the company and its employees, including contact details and customer reviews. The main page of the site contains images of the interiors of each class of apartments, as well as news and promotions of the hotel. The company’s management decided to implement a system of registration and booking of apartments on the website. The apartments are numbered from 100 to 1010, with 11 rooms on each floor. When booking, you must provide the customer’s room number, name and ID of the customer’s ID card, as well as the customer’s valid email address. Customers can check in at any available room available for booking. The registration data must be entered in the database. In the personal account of the administrator, the information should be displayed in the form of a table in a sorted form, and to search for information about the client, the administrator should use an effective built-in form on the site for quick navigation. When booking, a prepayment is accepted, which is 25% of the price of the selected apartment class. After the booking is completed, the customer is sent an electronic receipt with the booking confirmation to the email address specified during registration.

Компания «Highrise» успешно занимается гостиничным бизнесом и имеет собственный вебсайт. Апартаменты в гостинице делятся на классы: «люкс», «полулюкс» и «эконом». В главном меню сайта размещены ссылки для получения подробной информации о структуре компании и ее сотрудниках, в том числе контактные данные и отзывы клиентов. На главной странице сайта представлены изображения интерьеров каждого из класса апартаментов, а так же новости и акции гостиницы. Руководство компании решило внедрить систему для регистрации и бронирования апартаментов на сайте. Апартаменты пронумерованы от 100 по 1010, по 11 номеров на каждом этаже. При бронировании должны указываться номер комнаты, имя, и идентификатор удостоверения личности клиента, а так же действующий адрес электронной почты клиента. Клиенты могут регистрироваться в любых свободных номерах, доступных для бронирования. Данные о регистрации должны записываться в базу данных. В личном кабинете администратора, при запросе, информация должна выводится в форме таблицы в отсортированном виде, а для поиска информации о клиенте, администратор должен использовать эффективную встроенную на сайте форму, для быстрой навигации. При оформлении бронирования принимается предварительная оплата, которая составляет 25% стоимости от выбранного класса апартаментов. По завершению бронирования, клиенту отправляется электронный чек, с подтверждением бронирования, на указанный при регистрации адрес электронной почты.

 

Скачать или редактировать эту презентацию

Система интерактивных вопросов с автопроверкой

HTML+CSS пример деления веб страницы на секции: header, content, sidebar, footer

HTML+CSS пример горизонтального двууровневого меню сайта

HTML+CSS пример изменения дизайна формы на сайте

HTML+CSS пример изменения дизайна таблицы

Подкейс JS (Java Script)

The company “High-rise” is successfully engaged in the hotel business and has its own website. Apartments in the hotel are divided into classes: “luxury”, “junior suite” and “economy”. The main menu of the site contains links to get detailed information about the company’s structure and its employees, including contact details and customer reviews. The main page of the site contains images of the interiors of each class of apartments, as well as news and promotions of the hotel. The hotel’s call center is always busy due to a large number of calls from potential customers. Basic questions asked of the Manager: “What is the total price (in different classes apartment)?”, “What is the value of the apartment with multiple rooms?”, “Is Breakfast included?”, “What is the rate include Breakfast?”. To improve the quality and speed of answers to questions, it was decided to add a calculator for the cost of apartments on the main page of the site. At the same time, the company’s management continues to implement a system for registering and booking apartments on the website. The apartments are numbered from 100 to 1010, with 11 rooms on each floor. When booking, you must specify the room number, name, and ID of the customer’s ID card, as well as a valid email address of the customer. Customers can check in to any available rooms available for booking. The registration data must be recorded in the database. Access to the administrator’s personal account works in test mode, and the login and password data are stored in plain text. In the personal account of the administrator, when requested, the information should be displayed in the form of a table in sorted form, and to search for information about the client, the administrator should use an effective built-in form on the site for quick navigation. At the time of booking, a pre-payment is accepted, which is 25% of the price of the selected apartment class. Upon completion of the booking, the customer is sent an electronic receipt with the booking confirmation to the email address specified during registration.

Компания «High-rise» успешно занимается гостиничным бизнесом и имеет собственный вебсайт. Апартаменты в гостинице делятся на классы: «люкс», «полулюкс» и «эконом». В главном меню сайта размещены ссылки для получения подробной информации о структуре компании и ее сотрудниках, в том числе контактные данные и отзывы клиентов. На главной странице сайта представлены изображения интерьеров каждого из класса апартаментов, а так же новости и акции гостиницы. Call-центр гостиницы всегда занят в связи с большим количеством звонков от потенциальных клиентов. Основные вопросы, которые задают менеджеру: «Какова общая стоимость проживания (в различных классах апартаментов)?», «Какова стоимость апартаментов с несколькими комнатами?», «Включен ли завтрак?», «Какова стоимость проживания с включенным завтраком?». Для повышения качества и скорости ответов на вопросы, было принято решение о добавлении калькулятора стоимости апартаментов, на главной странице сайта. Вместе с тем руководство компании продолжает внедрять систему для регистрации и бронирования апартаментов на сайте. Апартаменты пронумерованы от 100 по 1010, по 11 номеров на каждом этаже. При бронировании должны указываться номер комнаты, имя, и идентификатор удостоверения личности клиента, а так же действующий адрес электронной почты клиента. Клиенты могут регистрироваться в любых свободных номерах, доступных для бронирования. Данные о регистрации должны записываться в базу данных. В личном кабинете администратора, при запросе, информация должна выводится в форме таблицы в отсортированном виде, а для поиска информации о клиенте, администратор должен использовать эффективную встроенную на сайте форму, для быстрой навигации. При оформлении бронирования принимается предварительная оплата, которая составляет 25% стоимости от выбранного класса апартаментов. По завершению бронирования, клиенту отправляется электронный чек, с подтверждением бронирования, на указанный при регистрации адрес электронной почты.

 

Скачать или редактировать эту презентацию

Система интерактивных вопросов с автопроверкой

JS пример простого арифметического калькулятора

JS пример калькулятора стоимости апартаментов отеля и динамическое изменение CSS

JS пример калькулятора стоимости апартаментов отеля и его размещение в главном меню

JS пример контроля доступа пользователей

JS пример для построения гистограммы

JS пример для построения линейчатой диаграммы

Подкейс PHP (PHP: Hypertext Preprocessor)

The company “High-Rise” is successfully engaged in the hotel business. Apartments in the hotel are divided into classes: “luxury”, “junior suite” and “economy”. The company’s management decided to hire a specialist to develop the site. The main menu of the site should contain links to get detailed information about the structure of the company and its employees, including contact details and customer reviews. The main page of the site should contain images of the interiors of each class of apartments, as well as news and promotions of the hotel. At the same time, the hotel’s call center is always busy due to the large number of calls from potential customers. The main questions that are asked to the Manager: “What is the total cost (in different classes of apartments)?”, “What is the price of a multi-room apartment?”, ” Is breakfast included?”, “What rate includes breakfast?”. To improve the quality and speed of answers to questions, it was decided to add a calculator for the cost of apartments to the main page of the site. At the same time, the company’s management is implementing a system for registering and booking apartments on the website. The apartments are numbered from 100 to 1010, with 11 rooms on each floor. When booking, you must provide the customer’s room number, name and ID of the customer’s ID card, as well as the customer’s valid email address. Customers can check in at any available room available for booking. The registration data must be entered in the database. Access to the personal account of the chief administrator (to check the reserved rooms) works, the login and password data are stored in the database. Registration is closed, and the entry to the database of new users of the system for checking the reserved rooms is available only in the personal account of the chief administrator. In the personal account of the administrator, the information should be displayed in the form of a table in a sorted form, and to search for information about the client, the administrator should use an effective built-in form on the site for quick navigation. A prepayment of 25% of the price of the selected apartment class is accepted at the time of booking. After the booking is completed, the customer is sent an electronic receipt with the booking confirmation to the email address specified during registration.

Компания «High-rise» успешно занимается гостиничным бизнесом. Апартаменты в гостинице делятся на классы: «люкс», «полулюкс» и «эконом». Руководство компании решило нанять специалиста для разработки вебсайта. В главном меню сайта должны быть размещены ссылки для получения подробной информации о структуре компании и ее сотрудниках, в том числе контактные данные и отзывы клиентов. На главной странице сайта должны быть представлены изображения интерьеров каждого из класса апартаментов, а так же новости и акции гостиницы. Вместе с тем, Call-центр гостиницы всегда занят в связи с большим количеством звонков от потенциальных клиентов. Основные вопросы, которые задают менеджеру: «Какова общая стоимость проживания (в различных классах апартаментов)?», «Какова стоимость апартаментов с несколькими комнатами?», «Включен ли завтрак?», «Какова стоимость проживания с включенным завтраком?». Для повышения качества и скорости ответов на вопросы, было принято решение о добавлении калькулятора стоимости апартаментов, на главной странице сайта. Вместе с тем руководство компании внедряет систему для регистрации и бронирования апартаментов на сайте. Апартаменты пронумерованы от 100 по 1010, по 11 номеров на каждом этаже. При бронировании должны указываться номер комнаты, имя, и идентификатор удостоверения личности клиента, а так же действующий адрес электронной почты клиента. Клиенты могут регистрироваться в любых свободных номерах, доступных для бронирования. Данные о регистрации должны записываться в базу данных. Доступ к личному кабинету главного администратора (для проверки забронированных номеров) работает, данные о логине и пароле хранятся в базе данных. Регистрация закрыта, а ввод новых пользователей системы для проверки забронированных номеров доступен в личном кабинете главного администратора. В личном кабинете администратора, при запросе, информация должна выводится в форме таблицы в отсортированном виде, а для поиска информации о клиенте, администратор должен использовать эффективную встроенную на сайте форму, для быстрой навигации. При оформлении бронирования принимается предварительная оплата, которая составляет 25% стоимости от выбранного класса апартаментов. По завершению бронирования, клиенту отправляется электронный чек, с подтверждением бронирования, на указанный при регистрации адрес электронной почты.

 

Скачать или редактировать эту презентацию

Система интерактивных вопросов с автопроверкой

PHP пример простого арифметического калькулятора

PHP пример простой системы регистрации и авторизации на сайте

PHP пример системы бронирования (запись в базу данных)

PHP пример извлечения записей из таблицы бронирования (вывод из базы данных)

YouTube

Учебные проекты 2022 'CMS News' (HTML, CSS, JS, PHPMySQL)
Проекты выполненные учащимися с целью применения при web-программировании при решении сценарных задач.
Проект 'CMS Drivers'

Автор: Алемжанкызы Алуа, 2022 г

Инструкция по установке сайта (используется XAMMP)

0. Установить XAMMP и открыть панель XAMMP. Запустить сервисы Apache и MySQL
1. Если вы пользуетесь XAMMP, в папке C:\xampp\htdocs создать папку www
2. Скопировать содержимое папки CMS Drivers в папку www
3. Открыть браузер
4. Набрать localhost/phpmyadmin

5.В СУБД PHPMyAdmin создать новую учетную запись

хост -localhost
имя пользователя – spleengoku
пароль – bydysh21$$

6.В СУБД PHPMyAdmin создать новую базу данных с именем capybara
7.Импортировать файл capybara (2).sql
8.Использовать сайт по адресу localhost/www

Исходный код проекта для XAMPP

Проект 'CMS Market'

Автор: Ищенко Богдан, 2022 г

Инструкция по установке сайта (используется XAMMP)

0. Установить XAMMP и открыть панель XAMMP. Запустить сервисы Apache и MySQL
1. Если вы пользуетесь XAMMP, в папке C:\xampp\htdocs создать папку www
2. Скопировать содержимое папки CMS Market в папку www
3. Открыть браузер
4. Набрать localhost/phpmyadmin

В СУБД PHPMyAdmin создать новую учетную запись

хост -localhost
имя пользователя – user
пароль – user123

5.В СУБД PHPMyAdmin создать новую базу данных с именем aslan
6.Импортировать файл backup.sql и удалить связи между таблицами
7.Создать новую таблицу с использование SQL запроса в файл sql.txt
8.Использовать сайт по адресу localhost/www

Исходный код проекта для XAMPP

Видео инструкция о порядке установки и настройки БД и файлов сайта

Проект 'CMS Services'

Автор: Искакова Амина, 2022 г

Инструкция по установке сайта (используется XAMMP)

Инструкция по установке сайта (используется XAMMP)

0. Установить XAMMP и открыть панель XAMMP. Запустить сервисы Apache и MySQL
1. Если вы пользуетесь XAMMP, в папке C:\xampp\htdocs создать папку www
2. Скопировать содержимое папки CMS Services в папку www
3. Открыть браузер
4. Набрать localhost/phpmyadmin

В СУБД PHPMyAdmin создать новую учетную запись

хост -localhost
имя пользователя – base
пароль – n78-8t6-2wM-vXx

5.В СУБД PHPMyAdmin создать новую базу данных с именем project
6.Импортировать файл project.sql и удалить связи между таблицами
7.Использовать сайт по адресу localhost/www

Исходный код проекта для XAMPP