Ministerul Educației, Culturii și Cercetării

Universitatea Tehnică a Moldovei

Facultatea Calculatoare, Informatică şi Microelectronică
Departamentul Ingineria Software și Automatică

Proiectarea unei pagini Web utilizând ASP.NET

Lucrare de laborator nr.2
Disciplina: Tehnologii Web

Studentul gr. TI-173: Rosca Florin

Conducător: asistent universitar, Rusu Cristian

Chișinău 2019
Scopul lucrării
Utilizarea ASP.NET pentru proiectare Web Site-urilor.

Sarcina de lucru
În Visual Studio, utilizând platforma ASP.NET să se inclusă conținutul paginii Web.

Mersul lucrării
1. Crearea unui Blank Solution în Visual Studio.

Figura 1 – Exemplu de HTML

2. În Blank Solution se crează proiectul ASP.NET.

Figura 2 – Creare proiect ASP.NET

3. Instalarea pachetului NuGet.

Figura 3 – Instalarea pachetului NuGet

 4. Crearea File BundleConfig.cs n folder-ul App_Start și să se includă datele necesare în Bundle.

Figura 4 – Crearea BundleConfig.cs

Codul pentru includerea script-urilor și stilurilor în Bundle.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/js-plugin/easing/jquery.easing.1.3.js",
"~/js-plugin/hoverdir/jquery.hoverdir.js",
"~/js-plugin/neko-contact-ajax-plugin/js/jquery.form.js",
"~/js-plugin/rs-plugin/js/jquery.themepunch.plugins.min.js",
"~/js-plugin/rs-plugin/js/jquery.themepunch.revolution.min.js",
"~/js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js",
"~/js-plugin/pretty-photo/js/jquery.prettyPhoto.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));

// Use the development version of Modernizr to develop with and learn from. Then,
when you're
// ready for production, use the build tool at https://modernizr.com to pick only the
tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/js/modernizr-2.6.1.min.js"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/bootstrap/css/bootstrap.min.css",
"~/bootstrap/js/bootstrap.js",
"~/bootstrap/js/bootstrap-carousel-ie.js",
"~/js/custom.js",
 "~/js-plugin/respond/respond.min.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/bootstrap/css/bootstrap.min.css",
"~/font-icons/custom-icons/css/custom-icons.css",
"~/font-icons/custom-icons/css/custom-icons-ie7.css",
"~/css/layout.css",
"~/css/layout.css",
"~/css/colors.css"));

5. În Global.asax se include linia

BundleConfig.RegisterBundles(BundleTable.Bundles);

6. Crearea HomeController în folder-ul Controlles.

Figura 5 – Crearea HomeController

Codul Controller-ului.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace eUseControl.Web.Controllers
{
public class HomeController : Controller
{
 public ActionResult Index()
{
return View();
}

public ActionResult News()

{
return View();
}

public ActionResult Contact()

{
return View();
}
}

7. Crearea View cu name-ul Index în View/Home.

Figura 6 – Index.cshtml
 La începutul file-ului Index.cshtml includeți codul. După acesta includeți codul content-ul paginii
principale a site-ului.
@{
ViewBag.Title = "Home Page";
}
<header>
<div id="logo" onclick="slowScroll('#top')">
<span>WebProgerMD</span>
</div>
<div id="about">
<a href="#" onclick="slowScroll('#overview')" title="Benefits">Benefits</a>
<a href="#" onclick="slowScroll('#contacts')" title="Contacts">Contacts</a>
<a href="#" onclick="slowScroll('#mess_send')" title="Register">Register</a>
</div>
</header>

<div id="top">
<form action="action_page.php">
<div class="container" id="sign">
<h1>Programming</h1>
<h3>As a way of life!</h3>
<h2>Sign In</h2><br /><br /><br />
<label for="email"><b></b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b></b></label>
<input type="password" placeholder="Enter Password" name="psw" required><br />
<button type="submit" class="registerbtn">Login</button>
</div>
</form>
</div>

<div id="overview">
<h2>Benefits</h2>
<h4>everything is easier with us</h4>

<div class="img">
<a href="#"><img src="https://itproger.com/img/courses/1476977754.jpg" alt=""></a>
<span><a href="#">Learning JS for Beginners</a></span>
</div>
<div class="img">
<a href="#"><img src="https://itproger.com/img/courses/1530341233.jpg" alt=""></a>
<span><a href="#">PhotoShop tutorials for beginners</a></span>
</div>

</div>

<div id="contacts">
<center><h5>Feedback</h5></center>
<form id="form_input">
<label for="name">Name <span>*</span></label><br>
<input type="text" placeholder="Enter your name " name="name" id="name"><br>
<label for="email">Email<span>*</span></label><br>
<input type="email" placeholder="Enter email" name="email" id="email"><br>
<label for="message">Message <span>*</span></label><br>
<textarea placeholder="Enter your message" name="message" id="message"></textarea><br>
<div id="mess_send" class="btn">To send</div>
</form>
</div>
<div id="overview">
<form action="action_page.php">
<div class="container" id="sign">

<h1>Register</h1>
<p>Please fill in this form to create an account and to learn about new courses...</p>

<hr>

<label for="email"><b>Email</b></label><br />

<input type="text" placeholder="Enter Email" name="email" required><br />

<label for="psw"><b>Password</b></label><br />

<input type="password" placeholder="Enter Password" name="psw" required><br />

<label for="psw-repeat"><b>Repeat Password</b></label><br />

<input type="password" placeholder="Repeat Password" name="psw-repeat" required>

<hr>

<p>Already have an account? <a href="#">Sign in</a>.</p>

<button type="submit" class="registerbtn">REGISTER</button>
</div>
</form>
</div>

<div id="faq">
<div>
<span class="title">PAYMENT</span><br>
<span class="heading">How will the payment go?</span>
<p>Web developers are professionals who build attractive and functional websites. A
professional and user-friendly website reflects a business that is trustworthy, relevant and client
or consumer-centric.</p>
</div>
<div>
<span class="title">INFORMATION</span><br>
<span class="heading">What is included in the service?</span>
<p>Web developers are professionals who build attractive and functional websites. A
professional and user-friendly website reflects a business that is trustworthy, relevant and client
or consumer-centric.</p>
</div>
<div>
<span class="title">WARRANTY</span><br>
<span class="heading">What guarantees are there?</span>
<p>Web developers are professionals who build attractive and functional websites. A
professional and user-friendly website reflects a business that is trustworthy, relevant and client
or consumer-centric.</p>
</div>
</div>

8. În folder-ul Views se crează file-ul .cshtml _ViewStart.

Conținutul _ViewStart.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

9. În folder-ul View să se creeze folder-ul Shared cu file-ul .cshtml _Layout, _Footer și _Header.
 Conținutul _Layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav>
@Html.Partial("_Header")
</nav>
<div class="container body-content">
@RenderBody()
</div>
<section>
<!-- Footer-->
@Html.Partial("_Footer")
</section>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function slowScroll(id) {
$('html, body').animate({
scrollTop: $(id).offset().top
}, 500);
}

$(document).on("scroll", function () {
if ($(window).scrollTop() === 0)
$("header").removeClass("fixed");
else
$("header").attr("class", "fixed");
});
</script>
</body>
</html>
Rezultatul rularii:

Figura 6. Rezultatul rularii

Concluzie
În cadrul elaborarii lucrării de laborator nr.2 am studiat posibilitatile de elaborare a aplicatiilor web
in mediul de dezvoltare Microsoft Visual Studio 2017 folosind platforma ASP .Net. si conectind framework
Bootstrap.