Summary
Highlights
The video introduces a new project: an online job portal. The series will cover building the portal from scratch, including theme integration and functionality. The first step involves setting up a new ASP.NET Web Application (.NET Framework) project in Visual Studio, choosing the 'Empty' template and 'Web Forms'.
The tutorial demonstrates how to download a free Bootstrap job portal template from themewagon.com. After downloading, the template's 'assets' folder (containing CSS, Bootstrap, images, JavaScript, and jQuery) is copied into the root directory of the Visual Studio project. New folders 'User' and 'Admin' are created to organize the project.
A 'UserMaster.Master' page is added to the 'User' folder. The header and footer code from the downloaded 'index.html' template are then copied into this master page. This ensures a consistent header and footer across all user pages. A 'Default.aspx' page with the master page is created to test the integration in the browser.
Upon running the 'Default.aspx' page, it's observed that CSS and images are not loading correctly due to incorrect file paths. The video shows how to adjust the paths within the 'UserMaster.Master' file by adding '../' to navigate up one directory level to correctly access the 'assets' folder. This ensures all styling and images are properly rendered.
The main content section of the 'index.html' template is copied into the 'Default.aspx' page's ContentPlaceHolder. Path adjustments for images within this content are made to ensure they display correctly. A search form within the template is commented out as it's not needed for the initial setup.
Similar to the homepage, 'About.aspx', 'Contact.aspx', 'JobListing.aspx', and 'JobDetails.aspx' pages are created using the 'UserMaster.Master' page. The main content from their respective HTML template files ('about.html', 'contact.html', 'job-listing.html', 'job-details.html') is copied into these new ASP.NET pages. All image and CSS paths are updated to reflect the new project structure in the master page's navigation links and within the content of each page.
The tutorial transitions to setting up the database. SQL Server Management Studio is used to create a new database named 'JobPortal'. A table named 'Contact' is created within this database, with columns for `ContactID` (primary key, identity), `Name`, `Email`, `Subject`, and `Message` to store contact form submissions.
The 'Contact.aspx' page's form is modified. The HTML input elements are given `runat='server'` attributes to be accessible from the C# code-behind. The submit button is replaced with an `asp:Button` control. A connection string named 'CS' is added to the `web.config` file, specifying the data source, initial catalog ('JobPortal'), and integrated security.
In the `Contact.aspx.cs` file, a click event handler for the Send button is implemented. This handler uses a `try-catch-finally` block for error handling. It retrieves the connection string from `web.config`, constructs an SQL `INSERT` query, and uses `SqlCommand` to insert data from the form fields into the 'Contact' table. Upon successful insertion, a success message is displayed (using a Label control with Bootstrap styling), and the form fields are cleared. If an error occurs, an alert message is shown.
The `required` attribute is added to the HTML input tags in the 'Contact.aspx' page to enable client-side validation, ensuring users fill out all necessary fields before submission. The `novalidate` attribute is removed from the form. The functionality is tested by submitting an empty form and then a filled-out form, verifying that validation works and data is successfully inserted into the 'Contact' table in SQL Server.