Summary
Highlights
Introduction to the Project and Setup00:00:11
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'.
Downloading and Integrating the Bootstrap Template00:03:18
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.
Creating a Master Page and Initial Template Integration00:07:31
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.
Fixing Image and CSS Paths in the Master Page00:21:31
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.
Integrating Homepage Content00:31:19
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.
Integrating About, Contact, Job Listing, and Job Details Pages00:36:37
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.
Database Setup for Contact Form00:58:09
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.
Handling Contact Form Submission and Database Insertion01:06:33
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.
C# Code for Contact Form Submission01:08:29
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.
Adding Form Validation and Testing01:38:55
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.