434 Slices
Medium 9780987090850

3. Adding Some Style

Ian Lloyd SitePoint ePub

In Chapter 1 and Chapter 2, we stepped through the process of setting up your computer so that we could develop websites, and pulled together the beginnings of a website with which you could impress your friends and family. The trouble is, when you came to show off your fledgling site to your nearest and dearest, they weren’t that impressed. What have you done wrong?

The answer is nothing. It’s true that your website may look a little bland at present, but the underlying structure on which it’s built is rock-solid. To return to our automotive analogy, you now have the perfect chassis and some decent bodywork, and, while your car’s yet to turn heads, it’s only a matter of time. Just let them see what you can do with this rolling shell!

In this chapter, we’ll begin the process of adding that lick of paint to your site. The tool for the job is Cascading Style SheetsCSS to those in the know (or with limited typing abilities). Let’s take a look at what CSS can do for you.

See All Chapters
Medium 9780980455250

A. Testing Environment

Rudy Limeback SitePoint ePub

In order to test your SQL, you need a testing environment. Even if you’re working for an organization that creates web sites using databases (and therefore may have servers you can test on), you might want to have your own space, to see how more ambitious SQL queries work. Well, it’s easy to set up your own testing environment on a laptop or desktop computer, but there are so many options it may take you a while to decide what to use.

Will you be using a Mac or PC? Do you need a specific database system, or are you free to assess what each one offers? How comfortable are you with source code text editing or with using the command line? What sorts of design tools will you use? It may be the case that you'll try out several combinations of database and script editor before you find one you like, but you should persevere.

The first step is to obtain a copy of the database system.

Choose a database system, and download and install the software. The more popular—but by no means only—database servers are listed here, including the URL of the web page where you can download them. These are all free versions that are ideal for practice.

See All Chapters
Medium 9780987090867

11. Managing Content Using GridView and DetailsView

Timmothy Posey SitePoint ePub

In the previous chapters, you learned some of the important concepts surrounding data access and presentation. You learned that when connecting to a database, you have to establish a connection using the SqlConnection class. You also learned that in order to retrieve data from the database table, you must write an SQL statement within a command using the SqlCommand class. You discovered that we use the SqlDataReader class to place the database records into a virtual container of some sort. Finally, you learned that presenting the data within the SqlDataReader was simply a matter of binding the SqlDataReader to a data control such as the Repeater or DataList controls.

Here, we’ll learn about two more controls that offer much more functionality and make it very easy for you to create a table: GridView and DetailsView. These controls, which form part of ASP.NET’s set of data controls, are more complex and offer many more features than Repeater and DataList. Of course, these additional features come at a cost—they consume more memory and processing power on the server, so they should only be used when they deliver real benefits. Otherwise, it’s best to stick to simpler controls.

See All Chapters
Medium 9780992279455

7. Understanding AngularJS Forms

Sandeep Panda SitePoint ePub

A form is one of the basic requirements for any CRUD app. You'll likely have different forms for different kind of operations. The good news is that AngularJS offers a nice form API that, not only lets you bind form controls to scope models, but also allows you to validate each control easily. This chapter will focus on form handling and validation in AngularJS.

What's a form? Well, it's just a container that groups several related input controls together. A control is an HTML element (such as input, select, textarea) that lets users enter data. You already know AngularJS provides us with the very useful ng-model directive that keeps the input control value and scope model in sync. So, to begin with, let's see how you can use ng-model with different input controls.

Please note that in the following examples, the <form> element isn't doing anything extra. All the data bindings will still work without <form>. Later on, we will see how the <form> element is useful.

See All Chapters
Medium 9780980576849

4. Styling

Jina Bolton SitePoint ePub

Almost every new front-end web developer I’ve ever spoken to seems to draw the same conclusion I did when beginning to learn CSS: forms are very, very tricky to style! There are a lot of complex elements involved here. We have text input boxes of two varieties (the input fields and the textareas). There are select menus of two varieties: single item select menus and multiple item select menus. We have radio buttons, checkboxes, labels, fieldsets, legends, buttons … all sorts of components that can require a lot more effort than your typical paragraph or heading—especially if the design is highly customized. And to top it all off, it seems that every single browser renders these elements completely differently!

Making form elements appear consistent in every browser is, in my opinion, one of the most challenging CSS problems to solve. So how do you achieve this?

Well, the first question to ask is: do you really need to achieve this? Yes, this is a book called Fancy Form Design, and why would we deter you from anything other than fancy-looking forms? But we do want you to understand certain implications first before diving in—and it’s important to remember that even if you’re stuck with the native styles of your browser, you can still achieve a fairly fancy form.

See All Chapters

See All Slices