signup form in c#

How to create a signup form in c sharp

In C Sharp by Baqir AliLeave a Comment

Almost all applications that have to store data need to have a signup form where users come and register themselves. A signup form is a form where users or the application admin register a user. Signup or Registering refers to collecting their data like name, phone number, email address, pictures as well as assign them login passwords.

Here in this article, we are going to design a signup form using c# with the database in SQL Server at the back end. So we are going to do it step by step.

  1. Create a user table in SQL Server Management Studio
  2. Create a project in visual studio
  3. Create database connection class
  4. Create user/employee class
  5. Design UI or user interface in windows form
  6. Connect both front end and back end

Create a user table in SQL Server Management Studio

  1. Go to start menu
  2. Search for SQL Server Management Studio
  3. Run SQL Server Managemen Studio
  4. Right-click on databases
  5. Click on New Database
  6. Create a database name Signup
  7. Expand the database click on the table and create a new table
  8. Table script is given below
  9. Design the database given below
USE [Signup]
GO

/****** Object:  Table [dbo].[Employee]    Script Date: 2/8/2020 9:05:03 AM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Employee](
	[EmployeeId] [nvarchar](50) NOT NULL,
	[EmployeeName] [nvarchar](50) NULL,
	[EmployeeLoginRole] [nvarchar](50) NULL,
	[EmployeeLoginPassword] [nvarchar](50) NULL,
	[EmployeeImage] [image] NULL,
 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED 
(
	[EmployeeId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO
Employee Table
Employee Table

Create classes in visual studio

Install Microsoft Visual Studio Community Version if you have not installed it yet. Run Microsoft Visual Studio and create a new project.

  1. Convert Form 1 into Signup
  2. Right-click on the project called Signup
  3. Create a new folder rename it to App_Code
  4. Right Click on the folder App_Code and create two new classes call them DBConnection.cs and Employee.cs
Signup Form in C#
Signup Form in C#

DBConnection.cs

using System.Data.SqlClient;

namespace Signup.App_Code
{
    class DBConnection
    {
        SqlConnection connection;
        public DBConnection()
        {
            connection = new SqlConnection(@"data source=(Local)\SQLEXPRESS; Database=Signup; integrated security = SSPI");
        }
        public SqlConnection connect()
        {
            connection.Open();
            return this.connection;
        }
        public void disconnect()
        {
            connection.Close();
        }

    }
}

Employee.cs

using System;
using System.Data.SqlClient;

namespace Signup.App_Code
{
    class Employee
    {
        DBConnection strcon = new DBConnection();
        public string employeeId { get; set; }
        public string employeeName { get; set; }
        public string employeeLoginRole { get; set; }
        public string employeeLoginPassword { get; set; }
        public byte[] image { get; set; }

        public void insertNewEmployee()
        {
            try
            {
                SqlConnection connection = strcon.connect();
                string sql = "INSERT INTO employee(EmployeeId,EmployeeName,EmployeeLoginRole,EmployeeLoginPassword,EmployeeImage) " +
                    " Values(@EmployeeId,@EmployeeName,@EmployeeLoginRole,@EmployeeLoginPassword,@EmployeeImage)";
                SqlCommand cmd = new SqlCommand(sql, connection);
                cmd.Parameters.AddWithValue("@EmployeeId", this.employeeId);
                cmd.Parameters.AddWithValue("@EmployeeName", this.employeeName);
                cmd.Parameters.AddWithValue("@EmployeeLoginRole", this.employeeLoginRole);
                cmd.Parameters.AddWithValue("@EmployeeLoginPassword", this.employeeLoginPassword);
                cmd.Parameters.AddWithValue("@EmployeeImage", this.image);

                cmd.ExecuteNonQuery();
                // and close the connection
                connection.Close();

            }
            catch (Exception ex)
            {
                throw new Exception("Could not insert new employee");
            }
        }
    }
}

Design UI in Windows Form

signup form in c#
signup form in c#

No need to design the form as given above.

  • create a textbox name txtEmployeeId
  • create a textbox name txtEmployeeName
  • create a textbox name txtEmployeeRole
  • create a textbox name txtEmployeePassword
  • create a PictureBox name it PictureBox
  • create a button

How to use small png icons in UI Design

I have used Icons8 for icons in UI you can also down and use it.

Load Initial Image for PictureBox

  1. Right Click on Form
  2. Write down the two lines of code after the initialize function
public Signup()
{
        InitializeComponent();
        txtEmployeeId.Select();
        pictureBox.Image = Properties.Resources.MS_2160;
}

Code for exiting the form or ui

Snippet

private void close(object sender, EventArgs e)
{
     Environment.Exit(0);
}

Code For Loading Dialog Box

  1. double click on the picture box and
try
{
          OpenFileDialog obj = new OpenFileDialog();
          obj.Filter = "Image Files (*.jpg)|*.jpg";
          obj.FilterIndex = 1;
          DialogResult file = obj.ShowDialog();
          if (file == DialogResult.OK)
          {
               pictureBox.Image = Image.FromFile(obj.FileName);
          }
}
catch (Exception ex)
{

}

Code to reset or clear textboxes

public void resetData()
{
      txtEmployeeId.Text = "";
      txtEmployeeName.Text = "";
      txtEmployeePassword.Text = "";
      txtEmployeeRole.Text = "";
      pictureBox.Image = Properties.Resources.MS_2160;
}

A function to convert image to byte array

public byte[] imageToByteArray(System.Drawing.Image imageIn)
{
     MemoryStream ms = new MemoryStream();
     imageIn.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
     return ms.ToArray();
}

Double click on the button and write down the code

private void button1_Click(object sender, EventArgs e)
        {
            try
            {
                string empId = string.IsNullOrWhiteSpace(txtEmployeeId.Text) ? "-" : txtEmployeeId.Text;
                if (empId.Equals("-"))
                {
                    MessageBox.Show("Invalid User ID");
                }
                else
                {
                    string name = string.IsNullOrWhiteSpace(txtEmployeeName.Text) ? "-" : txtEmployeeName.Text;
                    string role = string.IsNullOrWhiteSpace(txtEmployeeRole.Text) ? "-" : txtEmployeeRole.Text;
                    string password = string.IsNullOrWhiteSpace(txtEmployeePassword.Text) ? "-" : txtEmployeePassword.Text;

                    Image ximage = pictureBox.Image;
                    byte[] imgbytes = imageToByteArray(ximage);

                    Employee emp = new Employee();
                    emp.employeeId = empId;
                    emp.employeeName = name;
                    emp.employeeLoginRole = role;
                    emp.employeeLoginPassword = password;
                    emp.image = imgbytes;
                    emp.insertNewEmployee();


                    MessageBox.Show("Done");
                    resetData();
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.ToString());
            }
        }

You can download the project zip file. download zip file

Watch the Part 2 and Part 3 on our youtube channel

Support us by sharing this post

Leave a Comment