7 Replies - 187 Views - Last Post: 22 December 2018 - 12:22 AM Rate Topic: -----

#1 HorribleProgrammer808   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 21-December 18

Webpage/table that uses CRUD (SQL Database) for employee info?

Posted 21 December 2018 - 10:57 PM

Hello, I am in desperate need of help, as I just got my first Web Developer job and was given this "simple" project that is due on Monday.

I was asked to create an HTML page with a form or table in Visual Studio (I have never created a Website in VS before, only a text editor) and ASP.NET in VB.NET. My boss specifically asked me NOT to use any VS components or snippets like GrideView, (I tried eventually, but I keep getting errors) or Web Forms, etc. and I am good at HTML & CSS, so I am fine with that. However, I am extremely confused on how to implement the SQL + VB code when the HTML button is clicked?

I created a simple "Employee database" page with a Web Table that matches the info that I have in my separate SQL Server database that I will attach. When the edit button is clicked, I wanted the user to be able to Create, Read, Update and Delete, although my boss told me to create the DELETE using JS and AJAX, which I did using JS/CSS (deletes the whole row). What would be the best way of doing this? I am very, very stuck and every tutorial I read uses either GridView or C# instead of VB. I can code the stored procedures and create the VB code for the most part, but getting it into the button and the best way to create the way of editing is what I am confused about.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<head runat="server">
    <title>ABC Employee Database</title>

    <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet' />

      <meta name="viewport"
          content="width=device-width,
          initial-scale=1.0" />

    <style>
        body { 
            font-family: 'Book Antiqua';
            margin: auto;
            background-color: #0a0751;
            color: white;
        }

        #grad-bg {
            background-color: #0a0751;
            background-image: linear-gradient(#0a0751, #3078dd);
            height: 700px;
        }

        .header {
            font-family: 'Sofia';
            font-size: 60px;
            text-shadow: 7px 7px #0a0751;
            color: white;
            width: 100%;
            height: 200px;
            padding-top: 70px;
            text-align: center;
            background-color: black;
        }

        .navbar {
            width: 100%;
            height: 40px;
            background-color: #232323;
            color: white;
        }

        ul, li {
            display: inline;
            list-style-type: none;
            text-align: center;
            word-spacing: 20px;
            font-size: 23px;
            padding-top: 25px;
            margin-left: 105px;
        }

        a {
            text-decoration: none;
            color: white;
        }

            a:hover {
                background-color: #bfbebe;
            }

        .button {
            background-color: #0026ff;
            color: white;
            font-weight: bold;
            border: 0.5px solid #0026ff;
            border-radius: 5px;
        }

        footer, address {
            width: 100%;
            height: 50px;
            background-color: black;
            color: white;
            text-align: center;
            margin-top: 15px;
        }

        .footernav {
            word-spacing: 20px;
            font-size: 18px;
            padding-top: 10px;
        }

        address {
            padding-top: 50px;
            padding-bottom: 5px;
            font-size: 14px;
            font-family: 'Sofia';
        }

        h1, h2, h3 {
            text-align: center;
        }

        #table, td {
            border: 2px solid gray;
            background-color: white;
            color: black;
        }

        th {
            background-color: #232323;
            color: white;
            font-size: 18px;
            padding: 10px 10px 10px 10px;
        }

        td {
            padding: 10px 20px 10px 20px;
        }

        #table {
            width: 700px;
            height: 500px;
            text-align: center;
            margin-left: 185px;
            }

        #form1 {
            width: 700px;
            height: 400px;
            border: 2px solid gray;
            border-radius: 5px;
            margin-left: 330px;
            margin-top: 70px;
            padding-top: 15px;
            padding-left: 15px;
        }

        .formControl {
            width: 450px;
            height: 20px;
            margin-left: 110px;
        }

        .form-control {
            height: 200px;
            width: 450px;
            padding-top: 15px;
            margin-left: 110px;
        }

        .buttonsubmit {
            margin-left: 300px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

    </style>

</head>
  <!-- Header that links to home -->
<body>
  <div class="header">
    <header>
        <a href="#">ABC Employee Database</a>
    </header>
  </div>

  <!-- Navbar -->
  <div class="navbar">
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Staff</a></li>
          <li><a href="#">Login</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </div>
  <div id="grad-bg">
  <h3>VIEW OR EDIT AN EMPLOYEE</h3>

    <!-- Form used for entering the employee name and displaying it in a read-only textarea -->
    <div class="employeeList">
        <table id="table">
            <tr>
                <th>Employee ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address 1</th>
                <th>Address 2</th>
                <th>City</th>
                <th>State</th>
                <th>Hire Date</th>
                <th>Modify</th>
                <th>Remove</th>
            </tr>
                  <td>1012</td>
                  <td>Paul</td>
                  <td>Crawley</td>
                  <td>P.O. Box 877</td>
                  <td>NULL</td>
                  <td>Hilo</td>
                  <td>HI</td>
                  <td>2005-07-09</td>
                  <td>Edit</td>
                  <td><input type="button" class="button" value="Delete" onclick="deleteRow(this)"/></td>
                </tr>
               <tr>
                  <td>1234</td>
                   <td>Mary</td>
                   <td>Crawford</td>
                   <td>500 West Chandler Blvd</td>
                   <td>NULL</td>
                   <td>Chandler</td>
                   <td>AZ</td>
                   <td>2020-12-20</td>
                   <td>Edit</td>
                   <td><input type="button" class="button" value="Delete" onclick="deleteRow(this)"/></td>
               </tr>
               <tr>
                   <td>5678</td>
                   <td>Michael</td>
                   <td>Jackson</td>
                   <td>1000 West Hollywood Blvd</td>
                   <td>NULL</td>
                   <td>Hollywood</td>
                   <td>CA</td>
                   <td>2008-05-10</td>
                   <td>Edit</td>
                   <td><input type="button" class="button" value="Delete" onclick="deleteRow(this)"/></td>
                   </tr>
               <tr>
                   <td>7890</td>
                   <td>Jane</td>
                   <td>Doe</td>
                   <td>777 East Fake St</td>
                   <td>2058</td>
                   <td>Charlotte</td>
                   <td>NC</td>
                   <td>2011-08-11</td>
                   <td>Edit</td>
                   <td><input type="button" class="button" value="Delete" onclick="deleteRow(this)"/></td>
            </tr>
        </table>
   <%-- <form id="form1" runat="server">
    <div class="formGroup" autocomplete="on">
       <label for="nameField" autofocus><h3>Employee Full Name*:</h3></label>
        <input type="text" class="formControl" id="nameField" placeholder="Please enter a name" required />
        </div>

        <div class="buttonsubmit">
            <button type="submit" class="btn btn-primary">Find</button>
        </div>

        <div class="formGroup">
        <textarea class="form-control" id="displayField" readonly></textarea>
    </div>
    </form>--%>

  <!-- JS for deleting a row -->
        <script>

            function deleteRow(r) {
                var i = r.parentNode.parentNode.rowIndex;
                document.getElementById("table").deleteRow(i);
            }

        </script>
<footer>
    <div class="footernav">
	      | <a href="#home">Home</a> |
	      <a href="#">Staff</a> |
	      <a href="#">Login</a> |
	      <a href="#">About</a> |	
	      <a href="#">Contact</a> |
	
    <address>ABC Employees &copy;2020 All Rights Reserved.</address>
</footer>
    </div>
      </div>
</body>
</html>



Please help.

Is This A Good Question/Topic? 0
  • +

Replies To: Webpage/table that uses CRUD (SQL Database) for employee info?

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14691
  • View blog
  • Posts: 58,718
  • Joined: 12-June 08

Re: Webpage/table that uses CRUD (SQL Database) for employee info?

Posted 21 December 2018 - 11:00 PM

Is this plain HTML or something? ASP.NET Core 2.0? .. but not a classic webform for ASP.NET?
Was This Post Helpful? 0
  • +
  • -

#3 HorribleProgrammer808   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 21-December 18

Re: Webpage/table that uses CRUD (SQL Database) for employee info?

Posted 21 December 2018 - 11:08 PM

View Postmodi123_1, on 21 December 2018 - 11:00 PM, said:

Is this plain HTML or something? ASP.NET Core 2.0? .. but not a classic webform for ASP.NET?

Hello, I just selected Project > Visual Basic > ASP.NET Empty Web Application (Visual Basic). It appears to come as XHTML, but I removed the namespace and made it plain HTML. Not sure if I did it right; my boss just said to create a Website in VS. Sorry for not being too helpful.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14691
  • View blog
  • Posts: 58,718
  • Joined: 12-June 08

Re: Webpage/table that uses CRUD (SQL Database) for employee info?

Posted 21 December 2018 - 11:15 PM

Hmm. Still confused.. soooo.. no ASP.NET? Yes, ASP.NET?
Was This Post Helpful? 0
  • +
  • -

#5 HorribleProgrammer808   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 21-December 18

Re: Webpage/table that uses CRUD (SQL Database) for employee info?

Posted 21 December 2018 - 11:24 PM

View Postmodi123_1, on 21 December 2018 - 11:15 PM, said:

Hmm. Still confused.. soooo.. no ASP.NET? Yes, ASP.NET?

My apologies, yes it is ASP.NET. The Web application comes with the name of "Default.aspx" and there is a separate VB file to edit.
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14691
  • View blog
  • Posts: 58,718
  • Joined: 12-June 08

Re: Webpage/table that uses CRUD (SQL Database) for employee info?

Posted 21 December 2018 - 11:30 PM

Okay - so here's where it gets funny. Webforms (as you started up) are sun setting. In theory you should be using ASP.NET Core 2.1 in C#. Any clue which way your work flops on the topic?>
Was This Post Helpful? 1
  • +
  • -

#7 HorribleProgrammer808   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 21-December 18

Re: Webpage/table that uses CRUD (SQL Database) for employee info?

Posted 21 December 2018 - 11:43 PM

View Postmodi123_1, on 21 December 2018 - 11:30 PM, said:

Okay - so here's where it gets funny. Webforms (as you started up) are sun setting. In theory you should be using ASP.NET Core 2.1 in C#. Any clue which way your work flops on the topic?>

Ah, I see. Thank you for that info. Unfortunately, my work does not use C# at all, but it is my best backend language. I had to learn VB just to (barely) get this job. If I need to re-do the site entirely, I will. Just not sure about the best approach because he mainly wanted me to use my imagination. If GridView is the best way and if I can stop getting errors when I debug, I will do it and explain that I could not think of another way. I apologize, I have always had trouble with CRUD in Web sites.
Was This Post Helpful? 0
  • +
  • -

#8 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14691
  • View blog
  • Posts: 58,718
  • Joined: 12-June 08

Re: Webpage/table that uses CRUD (SQL Database) for employee info?

Posted 22 December 2018 - 12:22 AM

Fair enough. Thankfully MS has a ton of information on this.

https://docs.microso...2/entering-data
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1