Creating a Grocery List Manager Using Angular, Part 2: Managing Items

In the first part of this Angular tutorial series, you saw how to get started with creating a Grocery List Manager using Angular. You learnt how to create the view for the Grocery component, adding items to the grocery list and displaying the added items.

In this part, you’ll implement the features to mark completed items, edit existing items, and remove added items.

Getting Started

Let’s get started by cloning the source code from the first part of the tutorial. From your terminal, write in the following code to clone the source code:

Once the source code has been cloned, navigate to the project folder and install the required dependencies.

After installing the dependencies, you will be able to start the server. From the project folder, type in the following commands:

Point your browser to http://localhost:4200/ and you should have the application running.

Updating Grocery Items

Once you have the grocery items added to the list, you should be able to edit and update the items. Let’s provide an edit button in the listing grid which, when clicked, will enable the editing of existing items.

Modify the app.grocery.html code to include the edit button inside the grid.

Save the above changes and restart the server. Load the page and enter a few items and you will have the edit button for each item.

Grocery List Manager - Edit Button

When the user clicks the edit button, you need to add an on click method to handle the item edit. Modify the app.grocery.html to add an on click event for editing the item.

Pass the task to the onEdit method as shown in the above code to identify the item to be edited.

Inside the GroceryComponent class initialize the task scope variable as shown:

In the onClick method, you’ll check for the id to see if it’s an existing item or a new item. Modify the onClick method as shown:

As seen, you have assigned a unique time stamp as id to each task. Now let’s define the onEdit method to edit the existing item. Inside the onEdit method, assign the passed in item to the task variable.

Save the changes and restart the server. Enter a new item in the grocery list and click on the corresponding edit button. You will be able to edit and update the entry by clicking the OK button.

Grocery List Manager - Edit and Update

Deleting Grocery Items

Let’s add a delete icon to remove the existing items. Update the app.grocery.html file to modify the HTML code as shown:

Here is how the complete app.grocery.html file looks:

Add an on click event to the remove icon to delete the grocery item.

Save the changes and restart the server. Try adding new items to the grocery manager app and you will have the items listed along with the delete and edit icons.

Grocery List Manager App - Delete View

To implement the delete functionality, you need to add the onDelete method in the app.grocery.ts file as shown:

Once the user clicks the delete icon, you need to check the item id against the grocery item list and remove the entry from the tasks list. Here is how the onDelete method looks:

As seen in the above code, you have iterated the tasks list and checked it against the clicked item id. If it matched the item in the tasks list, it is removed using the splice method.

Save the above changes and restart the server. Add a few items to the grocery list manager. It will be added with the delete and edit icons to the task list grid. Try clicking on the remove icon and the item will be deleted from the items list.

Marking the Grocery Item as Done

Let’s add the functionality to strike out the items added to the list. Once the user is done with the tasks in the grocery list manager, it should be possible to strike out the completed tasks. To track the new and completed tasks, add a new variable strike to the task information. 

Modify the onClick method to include the new strike variable as shown:

Add a new class called strike in the src/style.css file which would strike out the item.

Include an on click event on the item to toggle the strike variable in the items variable. You’ll be applying the strike class to the items based on the boolean value of the strike variable. By default, it will be false. Here is the onStrike method to toggle the strike variables value:

As seen in the above method, you iterate through the list of items. Once the item is found, you toggle the strike value.

Based on the strike variable, you need to apply the class strike to the task name span. Here is how it looks:

As seen, you have used the ngClass directive to apply the class strike to the span element if the task.strike value is true.

Save the above changes and restart the server. Add the items to the list and click on the added item. Once clicked, the item will be struck out as expected.

Grocery List Manager - Strike Out Completed Task

Wrapping It Up

In this tutorial, you saw how to update, delete and mark the task as complete in the grocery manager app using Angular. I hope you enjoyed the tutorial. Do let me know your thoughts in the comments below.

JavaScript has become one of the de facto languages of working on the web. It’s not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato marketplace.

Oh, and don’t forget that the source code from this tutorial is available on GitHub.


Source: Nettuts Web Development

Using Celery With Django for Background Task Processing

Web applications usually start out simple but can become quite complex, and most of them quickly exceed the responsibility of only responding to HTTP requests.

When that happens, one must make a distinction between what has to happen instantly (usually in the HTTP request lifecycle) and what can happen eventually. Why is that? Well, because when your application becomes overloaded with traffic, simple things like this make the difference. 

Operations in a web application can be classified as critical or request-time operations and background tasks, the ones that happen outside request time. These map to the ones described above: 

  • needs to happen instantly: request-time operations
  • needs to happen eventually: background tasks

Request-time operations can be done on a single request/response cycle without worrying that the operation will time out or that the user might have a bad experience. Common examples include CRUD (Create, Read, Update, Delete) database operations and user management (Login/Logout routines).

Background tasks are different as they are usually quite time-consuming and are prone to failure, mostly due to external dependencies. Some common scenarios among complex web applications include:

  • sending confirmation or activity emails
  • daily crawling and scraping some information from various sources and storing them
  • performing data analysis
  • deleting unneeded resources
  • exporting documents/photos in various formats

Background tasks are the main focus of this tutorial. The most common programming pattern used for this scenario is the Producer Consumer Architecture. 

In simple terms, this architecture can be described like this: 

  • Producers create data or tasks.
  • Tasks are put into a queue that is referred to as the task queue. 
  • Consumers are responsible for consuming the data or running the tasks. 

Usually, the consumers retrieve tasks from the queue in a first-in-first-out (FIFO) fashion or according to their priorities. The consumers are also referred to as workers, and that is the term we will be using throughout, as it is consistent with the terminology used by the technologies discussed.

What kind of tasks can be processed in the background? Tasks that:

  • are not essential for the basic functionality of the web application
  • can’t be run in the request/response cycle since they are slow (I/O intensive, etc.)
  • depend on external resources that might not be available or not behave as expected
  • might need to be retried at least once
  • have to be executed on a schedule

Celery is the de facto choice for doing background task processing in the Python/Django ecosystem. It has a simple and clear API, and it integrates beautifully with Django. It supports various technologies for the task queue and various paradigms for the workers.

In this tutorial, we’re going to create a Django toy web application (dealing with real-world scenarios) that uses background task processing.

Setting Things Up

Assuming you are already familiar with Python package management and virtual environments, let’s install Django:

I’ve decided to build yet another blogging application. The focus of the application will be on simplicity. A user can simply create an account and without too much fuss can create a post and publish it to the platform. 

Set up the quick_publisher Django project:

Let’s get the app started:

When starting a new Django project, I like to create a main application that contains, among other things, a custom user model. More often than not, I encounter limitations of the default Django User model. Having a custom User model gives us the benefit of flexibility.

Make sure to check out the Django documentation if you are not familiar with how custom user models work.

Now we need to tell Django to use this User model instead of the default one. Add this line to the quick_publisher/settings.py file:

We also need to add the main application to the INSTALLED_APPS list in the quick_publisher/settings.py file. We can now create the migrations, apply them, and create a superuser to be able to log in to the Django admin panel:

Let’s now create a separate Django application that’s responsible for posts:

Let’s define a simple Post model in publisher/models.py:

Hooking the Post model with the Django admin is done in the publisher/admin.py file like this:

Finally, let’s hook the publisher application with our project by adding it to the INSTALLED_APPS list.

We can now run the server and head over to http://localhost:8000/admin/ and create our first posts so that we have something to play with:

I trust you’ve done your homework and you’ve created the posts. 

Let’s move on. The next obvious step is to create a way to view the published posts. 

Let’s associate our new view with an URL in: quick_publisher/urls.py

Finally, let’s create the template that renders the post in: publisher/templates/post.html

We can now head to http://localhost:8000/the-slug-of-the-post-you-created/ in the browser. It’s not exactly a miracle of web design, but making good-looking posts is beyond the scope of this tutorial.

Sending Confirmation Emails

Here’s the classic scenario:

Let’s add an is_verified flag and the verification_uuid on the User model:

Let’s use this occasion to add the User model to the admin:

Let’s make the changes reflect in the database:

We now need to write a piece of code that sends an email when a user instance is created. This is what Django signals are for, and this is a perfect occasion to touch this subject. 

Signals are fired before/after certain events occur in the application. We can define callback functions that are triggered automatically when the signals are fired. To make a callback trigger, we must first connect it to a signal.

We’re going to create a callback that will be triggered after a User model has been created. We’ll add this code after the User model definition in: main/models.py

What we’ve done here is we’ve defined a user_post_save function and connected it to the post_save signal (one that is triggered after a model has been saved) sent by the User model.

Django doesn’t just send emails out on its own; it needs to be tied to an email service. For the sake of simplicity, you can add your Gmail credentials in quick_publisher/settings.py, or you can add your favourite email provider. 

Here’s what Gmail configuration looks like:

To test things out, go into the admin panel and create a new user with a valid email address you can quickly check. If all went well, you’ll receive an email with a verification link. The verification routine is not ready yet. 

Here’s how to verify the account:

Hook the views up in: quick_publisher/urls.py

Also, remember to create a home.html file under main/templates/home.html. It will be rendered by the home view.

Try to run the entire scenario all over again. If all is well, you’ll receive an email with a valid verification URL. If you’ll follow the URL and then check in the admin, you can see how the account has been verified.

Sending Emails Asynchronously

Here’s the problem with what we’ve done so far. You might have noticed that creating a user is a bit slow. That’s because Django sends the verification email inside the request time. 

This is how it works: we send the user data to the Django application. The application creates a User model and then creates a connection to Gmail (or another service you selected). Django waits for the response, and only then does it return a response to our browser. 

Here is where Celery comes in. First, make sure it is installed:

We now need to create a Celery application in our Django application:

Celery is a task queue. It receives tasks from our Django application, and it will run them in the background. Celery needs to be paired with other services that act as brokers. 

Brokers intermediate the sending of messages between the web application and Celery. In this tutorial, we’ll be using Redis. Redis is easy to install, and we can easily get started with it without too much fuss.

You can install Redis by following the instructions on the Redis Quick Start page. You’ll need to install the Redis Python library, pip install redis, and the bundle necessary for using Redis and Celery: pip install celery[redis].

Start the Redis server in a separate console like this: $ redis-server

Let’s add the Celery/Redis related configs into quick_publisher/settings.py:

Before anything can be run in Celery, it must be declared as a task. 

Here’s how to do this:

What we’ve done here is this: we moved the sending verification email functionality in another file called tasks.py

A few notes:

Going back to main/models.py, the signal code turns into:

Notice how we call the .delay method on the task object. This means we’re sending the task off to Celery and we don’t wait for the result. If we used send_verification_email(instance.pk) instead, we would still be sending it to Celery, but would be waiting for the task to finish, which is not what we want.

Before you start creating a new user, there’s a catch. Celery is a service, and we need to start it. Open a new console, make sure you activate the appropriate virtualenv, and navigate to the project folder.

This starts four Celery process workers. Yes, now you can finally go and create another user. Notice how there’s no delay, and make sure to watch the logs in the Celery console and see if the tasks are properly executed. This should look something like this:

Periodic Tasks With Celery

Here’s another common scenario. Most mature web applications send their users lifecycle emails in order to keep them engaged. Some common examples of lifecycle emails:

Here’s what we’re going to do in our app. We’re going to count how many times every post has been viewed and send a daily report to the author. Once every single day, we’re going to go through all the users, fetch their posts, and send an email with a table containing the posts and view counts.

Let’s change the Post model so that we can accommodate the view counts scenario.

As always, when we change a model, we need to migrate the database:

Let’s also modify the view_post Django view to count views:

It would be useful to display the view_count in the template. Add this <p>Viewed {{ post.view_count }} times</p> somewhere inside the publisher/templates/post.html file. Do a few views on a post now and see how the counter increases.

Let’s create a Celery task. Since it is about posts, I’m going to place it in publisher/tasks.py:

Every time you make changes to the Celery tasks, remember to restart the Celery process. Celery needs to discover and reload tasks. Before creating a periodic task, we should test this out in the Django shell to make sure everything works as intended:

Hopefully, you received a nifty little report in your email. 

Let’s now create a periodic task. Open up quick_publisher/celery.py and register the periodic tasks:

So far, we created a schedule that would run the task publisher.tasks.send_view_count_report every minute as indicated by the crontab() notation. You can also specify various Celery Crontab schedules

Open up another console, activate the appropriate environment, and start the Celery Beat service. 

The Beat service’s job is to push tasks in Celery according to the schedule. Take into account that the schedule makes the send_view_count_report task run every minute according to the setup. It’s good for testing but not recommended for a real-world web application.

Making Tasks More Reliable

Tasks are often used to perform unreliable operations, operations that depend on external resources or that can easily fail due to various reasons. Here’s a guideline for making them more reliable:

Conclusions

I hope this has been an interesting tutorial for you and a good introduction to using Celery with Django. 

Here are a few conclusions we can draw:


Source: Nettuts Web Development

12 Best Contact Form PHP Scripts

Contact forms are a must have for every website. They encourage
your site visitors to engage with you while potentially lowering the amount of
spam you get.

For businesses, this engagement with visitors increases the
chances of turning them into clients or customers and thus increasing revenue.

Whether your need is for a simple three-line contact form or
a more complex one that offers loads of options and functions, you’re sure to
find the right PHP contact form here in our 12Best Contact Form PHP Scripts on CodeCanyon.

1. Perfect Contact Us Form

Perfect Contact Us Form is a Bootstrap-based form which is
fully customisable and easy to use. It integrates easily with HTML and PHP
pages, and all fields use jQuery validation script.

Perfect Contact Us Form

Best features:

  • AJAX based
  • both SMPT and PHP
    email script
  • jQuery-based Captcha
    is included for anti spam
  • and more

The PerfectContact Us Form is an easy-to-use form that will appeal to both beginners
and more experienced alike.

2. Quform- Responsive AJAX Contact Form

Quform is a versatile AJAX contact form that can
be adapted to be a register form, quote form, or any other form needed.

Quform - Responsive AJAX Contact Form

Best features:

  • three ready-to-use themes with six variations
  • ability to integrate into your own theme design
  • ability to create complex form layouts
  • file uploads supported
  • and more

With tons of other customisations available, Quform- Responsive AJAX Contact Form is bound to keep the most discerning
user happy.  

3. PHP Form Builder

A CodeCanyon top
seller, PHP Form Builder includes the jQuery live validation plugin which enables
you to build any type of form, connect your database, insert, update or delete
records and send your emails using customizable HTML/CSS templates.

PHP Form Builder

Best features:

  • over 50 prebuilt templates included
  • accepts any HTML5 form elements
  • default options ready for Bootstrap
  • email sending with advanced options
  • and more

With loads of options for creating a variety of elegant
contact forms and extensive documentation to help you on your way, PHP Form Builder is definitely a top choice for PHP site owners.

4. SLEEK Contact Form

Having made its debut in April 2017, SLEEK
Contact Form is the newest contact form PHP Script on CodeCanyon, and with its
simple and beautiful design and functionality, it promises to have a great
future.

SLEEK Contact Form

Best features:

  • invisible Google
    reCaptcha anti-spam system
  • ability to add
    attachments of any type
  • automatically get
    the IP and location of the sender inside email
  • easy to modify and
    implement new fields
  • and more

If you want a simple
contact form with a bit of a wow factor, SLEEK Contact Form may be just what you’re looking for.

5. Ultimate PHP, HTML5 & AJAX Contact Form

The Ultimate PHP,
HTML5 and AJAX Contact Form replaces the hugely successful AJAX Contact Form
and allows you to easily place and manage a self-contained contact form on
any page of your existing PHP website.

Ultimate PHP HTML5  AJAX Contact Form

Best features:

  • supports file uploads to attach to email
  • field type validation
  • multiple forms per page allowed
  • Google reCAPTCHA capable
  • and more

The Ultimate PHP, HTML5 & AJAX Contact Form is loaded with useful features that will
satisfy PHP site owners looking for a reliable contact form.

6. Contact Form Generator – Easy & Powerful Form Builder

Contact Form
Generator is one of CodeCanyon’s best-selling Contact Form PHP
Scripts.  It features a user-friendly
drag-and-drop interface that helps you build contact forms, feedback
forms, online surveys,
event registrations etc. and
get responses via email in a matter of minutes.

Contact Form Generator - Easy  Powerful Form Builder

Best features:

  • instant email or SMS notifications
  • custom email auto-responder
  • integrated with MailChimp, AWeber and five other email
    subscription services
  • anti-spam protection
  • and more

Contact Form Generator – Easy & Powerful Form Builder is a highly
effective form builder that enables you to create well-designed contact forms
and extend their range to include other functions.

7. KONTAKTO – AJAX Contact Form with Styled Map

KONTAKTO only
entered the market in March of 2017 but has already developed a name for
itself as one of the top-rated scripts in this category. The standout feature
of this beautifully designed contact form is the stylish map with a location
pin that comes integrated in the form.

KONTAKTO - AJAX Contact Form with Styled Map

Best features:

  • required field
    validation
  • anti spam with
    simple Captcha math
  • defaults to PHP mail
    but SMTP option available
  • repeat submission
    prevention
  • and more

Simple yet stylish, KONTAKTO – AJAX Contact Form with Styled Map can be easily integrated with your HTML
or PHP page and will be a fast favourite with many PHP site owners.

8. ContactPLUS+ PHP Contact Form

ContactPlus+ is
another clean and simple contact form which comes in three styles: an un-styled
version that you can build to suit your taste, a normal form with just the
essential information needed on a contact form, and a longer form to accommodate
an address.

ContactPLUS - PHP Contact Form

Best features:

  • Captcha verification
  • successful
    submission message
  • two styled and one
    un-styled version
  • and more

If you’re looking
for a clean and simple contact form that will integrate easily on you PHP
website, ContactPLUS+ PHP Contact Form is the one for you.

9. AJAX Contact Pro – Multi-language HTML5, Bootstrap Contact Form

Built using jQuery and PHP, AJAX Contact Pro comes
in eight style variations and has four HTML email templates. One of the
features that make this form so special is that it enables users to translate
the form fields into their language in real time. If a preferred language isn’t present in the
predefined list, the site administrator can add it to the list.

AJAX Contact Pro - Multi-language HTML5 Bootstrap Contact Form

Best features:

  • AJAX form
  • field validations
  • animations
  • modular construction
    so it can be integrated in an existing project
  • and more

AJAXContact Pro – Multi-language HTML5, Bootstrap Contact Form is certainly a
cool addition to the contact form PHP scripts offerings.

10. Hello Form Builder – Contact Form

Powered by AJAX and jQuery,
the Hello Form Builder employs an easy-to-use drag-and-drop function to help site
owners custom build contact forms with a variety of fields and features like
file upload, file attachment, Captcha system, etc.

Hello Form Builder - Contact Form

Best features:

  • 50 background images
    included
  • ability to customise
    error messages
  • one-click
    installation
  • auto responder
    message
  • and more

Hello Form Builder – Contact Form is a user-friendly builder that will appeal to
a wide cross-section of users.

11. Responsive Contact Form

The Responsive
Contact Form has just one main option to configure—your email address—to make
the script functional on your PHP site.

Responsive Contact Form

Best features

  • AJAX back end to save
    your bandwidth
  • uses JavaScript jQuery
    slide
  • very easy to
    integrate into any existing HTML or PHP page on your website
  • all fields have a
    validation script
  • and more

See Responsive Contact Form in action over at Code Canyon.

12. ContactForm with Custom Auto Responder

Another of Code Canyon’s top sellers, Contact Form with Custom Auto Responder is easy to edit and add to
your PHP or HTML pages.

Contact Form With Custom Auto Responder

Best features:

  • dropdown subject selection with different emails
  • custom auto responder message
  • custom Captcha filter
  • no separate page needed for thank you message
  • and more

ContactForm With Custom Auto Responder has been around for a while but is
still holding its own among the newcomers.

Conclusion

These 12 Best Contact Form PHP Scripts just scratch the surface of products available
at Envato Market, so if none of them fit your needs, there are plenty of other great
options you may prefer.

And if you
want to improve your PHP skills, check out the ever so useful free PHP tutorials
we have on offer
.


Source: Nettuts Web Development

Dynamic Page Templates in WordPress, Part 3

In the first two parts of this tutorial series, we covered what dynamic page templates were and why they were needed. We also looked at the code required to implement them. 

In this third and final tutorial in the series, I’ll be creating two examples of fully working dynamic page templates you can use in your own projects. These were specifically chosen to be easily extendable to suit your own needs, and are intended as inspiration for any other type of dynamic page templates you can think of.

The two dynamic page templates we’ll be taking a look at shortly are:

  • Simple Contact Form
  • Blog Post Archive

As well as implementing our page templates, I’ll also show you how to add extra polish, via custom CSS and JavaScript, to make interaction much more intuitive to end users.

Plus, we’ll take a look at how you can use page templates for any post type. Since WordPress 4.7, you can specify the post type a page template is associated with. We’ll see how you can modify an existing dynamic page template to take advantage of this new feature so it works with any post type.

We’ve a lot to cover in this tutorial, so let’s get started!

Theme Setup

We’ll be using a WordPress Twenty Seventeen child theme again, just as we did in part 2 of this tutorial series, to add our dynamic page template code. Let’s begin with a blank child theme.

Create a child theme folder called twentyseventeen-child and add the following files:

  • functions.php
  • style.css

Inside style.css, add:

And inside functions.php, add:

Add the child theme to your WordPress theme directory as we did before. If you’re not sure about how to do this, please refer back to part 2 in this tutorial series.

We now have a working (blank) child theme ready for us to add our dynamic page template code to.

Dynamic Form Page Template

Our first real implementation of a dynamic page template is a simple contact form. We’ll be adding the following fields:

  • Heading
  • Name
  • Subject
  • Email
  • Phone number

These are text input fields, apart from the heading, which is a standard HTML heading tag.

Before we implement the actual page template, though, we need to add custom controls to the page editor that will allow us to modify page template output. Then, when we create the page template, it will be rendered according to the page editor control settings.

In part 2 of this tutorial series, I mentioned that there’s no easy way to add custom controls directly to the ‘Page Attributes’ meta box, where the page template drop-down is located.

Page Attributes

This means that we have to add our dynamic page template controls elsewhere for now. I’ll show you how to get around this limitation a little later on, with a little CSS and JavaScript magic. But for now, we’ll have to make do with adding our custom controls to a separate meta box.

In the DPT_Twenty_Seventeen_Child class, register two new action hooks in the init method, and a new method called page_template_meta_boxes.

The load-post.php and load-post-new.php action hooks run whenever a post (of any type) is edited or created. When this happens, we register another action hook add_meta_boxes that will trigger the creation of our custom meta box, which is done via the add_page_template_meta_boxes callback function. Let’s implement that function now.

The actual rendering of the meta box controls will be handled via the display_form_page_template_meta_box callback function, which was specified above as one of the arguments to add_meta_box().

For now, I’ve added some placeholder text so we can see our new meta box on the page editor.

Form Page Template Meta Box

Remember from earlier that our form page template will have a heading and four text fields. There are many ways we could choose to customize the form output, but in our case let’s add check boxes for each field that will allow us to toggle their visibility. Update display_form_page_template_meta_box() to include the following code.

We include a nonce field for security which will be verified later on, just before we save the form values into the database.

Note: If for any reason the nonce value cannot be verified then the settings won’t be saved. 

Then, current form values are retrieved from the database before the custom form fields are outputted inside the meta box.

Form Page Template Meta Box with Options

Currently, our check boxes won’t be saved when the post is updated. To make the form settings persist, we need to register a new hook in the init() method that triggers during a save_post action, and then implement the callback to manually update post meta settings.

Once the form nonce value and user permissions have been verified, along with a check to make sure we are on the correct post type, we can test for the posted form values and safely save the values to the database.

Our check boxes are now fully functional, so we can go ahead and implement the actual page template! Inside the root child theme folder, add a new folder called page-templates, and add to it a new file called form-page-template.php.

Add the following code to the new file to create a blank page template.

To reduce code complexity, our contact form doesn’t validate user input, and we’ve committed the usual form checks and validation, as we want to focus purely on making the form output dynamic without extraneous code.

First, we need to retrieve the dynamic contact form check box values.

Then we can add in the form code. This is very similar for each form field. Let’s take a look at the name field code.

We test the value of the check box from the page template settings and only output the form field if it’s checked. Otherwise, nothing gets outputted. This is repeated for each form field.

Once the form is submitted, we send an email to the site admin and display a message on screen. Putting this all together, we have our final page template code.

To test everything’s working correctly, make sure all the form page template check boxes are checked and update the post. Then take a look at the page template on the front end.

Looking at the template on the front-end

Now try unchecking some of the form page template check boxes. Only the fields specified are outputted. You have total control over how the form is displayed! In the screen shot below, I unchecked just the email and phone check boxes.

Changing options for the front-end

Note: If you’re working on a local WordPress environment then the mail function may not actually send the email. It will only work if you have a mail server set up and running.

The form could easily be extended to add any number of controls of any type. For example, you could add an optional CAPTCHA field to your form, or be able to specify the order of fields outputted, or even the text for the form heading/labels. The point here is that you can use dynamic page templates to customize your form however you want. The possibilities are literally endless!

Organizing Our Page Template Controls

You might have noticed that there are a couple of usability issues with the admin controls for our dynamic page template. Functionally it’s fine, but ideally the dynamic page template controls should be in the same meta box as the page template drop-down. 

The meta boxes

Remember that the reason we had to add our page template controls to a separate meta box in the first place was because there’s currently no WordPress hook available to add custom controls directly to the page template meta box.

Also, when a dynamic page template is selected, we only want the controls associated with that template to be visible. We can complete both requirements by adding some custom CSS and JavaScript to the page editor.

Specifically, we need to:

  • Hide the form meta box.
  • Wait for the admin editor page to fully load.
  • Move the form controls to the ‘Page Attributes’ meta box.
  • Only display the admin form controls if the associated page template is selected.

Start by adding css and js folders to your child theme root folder. Inside the css folder create a style.css file, and in the js folder create a script.js file. You can call these anything you want, though. Just remember to make a note of the filenames if so, and replace them in the enqueue scripts code.

Then, we need to enqueue both files only on the page editor screen. We don’t want them added to all admin pages. Register a new action hook in the init() method to load scripts on admin pages, and add the callback function to enqueue the script files.

Notice how we’re targeting the page post type and then either the post-new.php or post.php admin pages. So, basically, unless we’re on the page editor, our scripts will not get loaded, which is what we want.

Let’s go ahead now and start adding CSS and JavaScript to customize the form page template controls. Firstly, hide the whole form meta box with CSS by adding this to style.css:

We could have done this with JavaScript, but we want the form meta box to be hidden immediately. If we did it via JavaScript, we’d have to wait until the page loaded, and you’d see a small flash as the meta box rendered on screen and then was hidden with JavaScript. So using CSS in this case is better.

Now for the JavaScript. Add this to script.js.

I’m not going to go into a huge amount of detail regarding the JavaScript, but here’s the overview.

We first cache a couple of CSS selectors and move the admin form controls to the Page Attributes meta box. Then, we have a displayControls() function that either hides or displays the form controls depending on the current value of the page template drop-down. We call displayControls() on page load, and then every time the drop-down is changed, to make sure we’re always in sync.

With the CSS and JavaScript added, the form page template controls are now displayed in the correct meta box, and only show if the associated page template is selected.

All of the page attributes

This looks much better and is way more intuitive to the user. Because meta boxes can be moved around WordPress admin screens, our dynamic page template controls would not necessarily have been anywhere near the page template drop-down! We’ve solved this problem in an elegant way to ensure our controls always appear directly underneath the page template drop-down!

Blog Posts Dynamic Page Template

Our next dynamic page template displays a list of your latest blog posts. But rather than just list all posts, we’ll implement a list box (similar to a drop-down) to allow you to choose the post category. Not only that, you’ll also be able to select multiple post categories.

Start by adding a new meta box in add_page_template_meta_boxes().

And now we need to implement the callback function to render our meta box.

Let’s break this down. We first define a variable to hold the list of post categories selected (if any) from the last time the post was updated. Another variable stores an array of all existing categories.

Note: We already have a nonce field from our previous form page template, so we don’t need to use another one here, as we are on the same admin page.

We then loop over the list of the site categories, populating a drop-down control as we go. Any category that was previously selected is selected again to keep everything in sync.

You might have noticed, though, that one of the arguments to selected() is a function call. Normally we just use selected() to compare two values to determine whether to mark the current item as selected. However, because we can select more than one category, our database setting is always an array of values (even if we actually only select one category).

The function q() is a helper function which allows us to check the current list item against the array of saved categories.

For each category, the category ID is passed into q() along with the saved category array. If the current category is in the list of saved categories then the current category is returned to selected() and will match the first argument. This will cause selected() to mark the current category as selected. This is an elegant way of handling multiple options for a single control.

All we need to do now is update save_page_template_meta() to handle saving blog post categories. Add this code to do just that.

Now, we need to create the blog posts page template. Inside your child themes page-templates folder, create a new file called blog-page-template.php, and add the following code.

The only real difference from our previous dynamic page template is the code inside the <main> HTML tag, so let’s take a closer look at that now.

We first set the value of the paged query variable, which is used to display posts over multiple pages, depending on the number of pages returned from our WordPress query. Then, we get the all the categories selected on the page editor meta box. The category array is converted to a string and given a default value if empty. A new WordPress query is then created and the results outputted in a standard loop.

The key thing here is that we’re able to control exactly which categories are passed to the query object, via the selections made on the page editor meta box. 

All we have to do now is hide the blog categories meta box and move the list control to the Page Attributes meta box. Just like we did before.

Inside style.css update the styles to hide the blog posts meta box:

The script.js file needs a little more code to be added. Here is the fully updated file.

Most of the changes worth noting are in the .on('change') function. Because we now have more than one dynamic page template, we have to test to see which one was selected from the drop-down, and then pass this in the corresponding element selector to displayControls().

We also need to hide all other page template controls apart from the one selected. And if the default page template is displayed, we hide all page template controls. The JavaScript code could be optimized further, but as we only have two dynamic page templates active, it does a good enough job for our needs.

An example of dynamic page templates

With these modifications in place, we now have two functioning dynamic page templates with each of their associated controls displayed directly underneath the page template drop-down.

Page Templates for Everyone

Earlier I alluded to how, in WordPress 4.7+, you can now assign page templates to any post type. Prior to WordPress 4.7, you could only assign them to pages, but not anymore!

All you have to do is add an extra line to the comment block in the page template header, and specify a comma-separated list of post types you want the page template to be available on.

The post type name needs to be the same as the slug entered when the post type was first registered, otherwise it will be ignored.

So, we can display page templates for any post type, but what about dynamic page templates? With just a few modifications, these can be supported too. Let’s take a look at what’s needed.

Luckily, apart from adding a line of code the top of your page template, all the necessary changes are in one file: functions.php.

Firstly, we need to enqueue the dynamic page template CSS and JavaScript not just on pages but for all post types we want to support dynamic page templates. So, in enqueue_editor_scripts(), we can do something like this.

Now, the dynamic page template scripts will be loaded on pages and the movie custom post type.

Next, in add_page_template_meta_boxes(), update each instance of add_meta_box() you want to show on a custom post type. Instead of just specifying page, we can pass in an array of required post types.

Finally, update save_page_template_meta() to support multiple post types just as we did for enqueue_editor_scripts(). And that’s it!

By just following these few short steps, you can modify your dynamic page templates to work for any post type.

Note: For any WordPress sites running less than version 4.7, the Template Post Type header text will simply be ignored, and all page templates will be displayed for pages by default. If this is not desirable, you can add custom code to make your page templates backwards compatible.

This snippet is taken from the Make WordPress blog, where you can find more information about backwards compatibility and the new page templates feature in more detail.

Conclusion

We’ve covered quite a bit of ground in the final part of this tutorial series. Specifically, we’ve implemented two fully working dynamic page templates and used custom CSS and JavaScript to add some polish to the user experience.

Even though the dynamic post types introduced in this tutorial series have been relatively simple, it would be very easy to extend them to create powerful and flexible page templates. There’s just so much scope to add some next-level functionality. And, from WordPress 4.7, you’re not limited to developing them just for pages either.

If you’re looking for other utilities to help you build out your growing set of tools for WordPress or for code to study and become more well-versed in WordPress, don’t forget to see what we have available in Envato Market.

Has this tutorial series inspired you to create dynamic page templates? If so, let me know in the comments below. I’d love to hear your ideas and how you might use them in your own projects.


Source: Nettuts Web Development

Creating a Grocery List Manager Using Angular, Part 1: Add & Display Items

An Angular application is made up of components. In an Angular application, a component consists of an HTML template and a component class. From the official docs:

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

In this tutorial, you’ll learn how to get started with creating a grocery list manager using Angular.

Getting Started 

You’ll need Node version > 6.9.x and Node Package Manager (npm) > 3.x.x. Once you have both, try to install the Angular CLI using npm.

After installing the Angular CLI, try to create a project using the same.

The above command will create the project structure. Navigate to the project directory and install the required dependencies.

To start the application web server, type the following command:

Once the application server has started, point your browser to http://localhost:4200/ and you will be able to view the default application.

Application Structure

Grocery List Manager Application Structure

The above figure shows the application structure for our grocery list manager. The src folder contains the source code for the default application. The app folder inside the src folder contains the TypeScript code. index.html inside the src folder is the main HTML file where the created Angular components are rendered.

Creating the Add Items View

By default, the application has an app-root component. Let’s create a new component called app-grocery for creating our grocery manager app. Inside the app folder, create a file called app.grocery.ts.

Import the Component module from the angular-core.

You’ll be using Bootstrap to design the component. Download and include the Bootstrap package from the official site. Keep the files in the src/assets folder.

Let’s define the component inside the app.grocery.ts file. The component will have three properties: selector, template, and styleUrls. selector indicates the way in which the component will be used. template defines the HTML which will be rendered when the particular selector is used. styleUrls defines the URL of the styles used in the component.

Inside app.grocery.ts, once the component module has been imported, define the app-grocery component as shown:

As seen in the above code, the component uses a template called app.grocery.html. Create a file called app.grocery.html inside the src/app folder. Add the following code to the app.grocery.html file:

In the app.grocery.ts file, add the GroceryComponent class to export.

You need to import the newly created component inside the app.module.ts before you can use it. Import the GroceryComponent in the app.module.ts.

Declare and bootstrap the newly created Grocery component in the app.module.ts file.

Now you are all set to use the Grocery component inside the index.html page. Remove the default component from the index.html page and add the following HTML code:

Save the above changes and restart the server. Navigate the browser to http://localhost:4200/ and you will have the Grocery component displayed.

Grocery Component View

Adding the Items 

Once an item is entered in the input text box, you need to read the item and save it in a list. To read the input, you’ll make use of ngModel, which will bind it to a variable. Add ngModel to the input text box.

Each time some text is entered in the input text box, the task variable gets updated accordingly. Define the task variable inside the GroceryComponent in the app.grocery.ts file. Add a variable called tasks to keep a collection of tasks entered.

On clicking the OK button, the task will be added to the tasks collection list that you have defined inside the GroceryComponent. Define an onClick method inside the GroceryComponent to handle the OK button click. Here is how it looks: 

Add the click event to the OK button as shown:

When the OK button is clicked, the new task is added to the tasks collection list. The task variable is also reset to clear the input text box.

Save the above changes and, on entering the task and clicking the OK button, the task is added to the tasks collection. To display the tasks collection, add a span inside app.grocery.html.

Enter the task in the input box and press the OK button. You will have the tasks variable displayed as JSON on the page.

Grocery Component With Tasks Info

Here is the complete app.grocery.ts file:

Displaying the Added Items

Now, since you have the added items in the tasks variable, you can use it to display the tasks. You’ll make use of the NgFor directive to iterate the tasks collection and dynamically create the HTML for displaying the tasks. You’ll be displaying the task inside the UL element and repeating the LI using the NgFor directive. Here is how it looks:

As seen in the above code, you iterate through the tasks variable and create the LI element and the span dynamically. Here is how the complete app.grocery.html template file looks:

Save the above changes and restart the server. Point your browser to http://localhost:4200/ and enter the task and press the OK button. Each added task will be displayed in the list below.

Grocery List Manager App

Wrapping It Up

In this Angular tutorial, you saw how to get started with creating a grocery list manager using Angular. You learnt how to create the view for the Grocery component, add items to the grocery list, and display the added items.

In the next part of this tutorial, you’ll implement the features to mark the completed items, archive the completed items, and remove the added items. 

Source code from this tutorial is available on GitHub. Do let us know your suggestions in the comments below. 


Source: Nettuts Web Development

New eBooks Available for Subscribers in June 2017

Do you want to learn more about gamification with Unity? How about mastering Vue.js or Meteor? Our latest batch of eBooks will teach you all you need to know about these topics and more.

New eBooks available for subscribers

Our Latest Selection of eBooks

This month we’ve made eight code eBooks available for Envato Tuts+ subscribers to download. Here’s a summary of those books and what you can learn from them.

  • Swift Data Structure and Algorithms

    Designing an application to scale while processing large amounts of data or provide fast and efficient searching can be complex, especially running on mobile devices with limited memory and bandwidth. Learning about best practices and knowing how to select the best data structure and algorithm in Swift is crucial to the success of your application and will help ensure your application is a success. That’s what this book will teach you.

  • Meteor

    Meteor: Full-Stack Web Application Development

    Meteor is a JavaScript development platform packed with collections of libraries and packages bound together in a tidy way to take care of everything from development to production, making your web development easier. This eBook will take you through an example of building a blog, give you a cookbook of recipes for Meteor development, and get you equipped with simple solutions to boost your development skills. 

  • Learning Xcode 8

    As the official tool for creating iOS applications, Xcode is chock full of features aimed at making a developer’s job easier, faster, and more fun. This book will take you from complete novice to a published app developer, and covers every step in between. You’ll learn the basics of iOS application development with Xcode, and gradually move on to more advanced topics. By the time you make it to the end of this book, you will have successfully built and published your first iOS application.

  • Gamification with Unity 5

    Gamification With Unity 5.x

    Are you looking at implementing gamification techniques for your business and wondering where to get a complete rundown of all the tricks and techniques? Well, you have come to the right place! This book will start right from the basics such as gameplay elements and their functionalities before gradually moving on to creating your first gamification project from scratch. You’ll be given the tools and shown how to perform various techniques for creating gamified applications in different contexts. Finally, you will implement various game elements into Unity, publish your own task management application, and get to know the best practices and approaches when designing gamified experiences. 

  • Natural Language Processing: Python and NLTK

    Natural Language Processing is a field of computational linguistics and artificial intelligence that deals with human-computer interaction. It provides a seamless interaction between computers and human beings and gives computers the ability to understand human speech with the help of machine learning. The number of human-computer interaction instances are increasing so it’s becoming imperative that computers comprehend all major natural languages. This book takes you through three detailed modules to get you fully up to speed with this important topic.

  • Swift 3 Protocols

    Swift 3 Protocol-Oriented Programming: Second Edition

    This book will help you understand the difference between object-oriented programming and protocol-oriented programming. It will demonstrate how to work with protocol-oriented programming using real-world use cases. You will gain solid knowledge of the different types that can be used in Swift and the differences between value and reference types. You will be taught how to utilize the advanced features of protocol-oriented programming to boost the performance of your applications. By the end of the book, you will have a thorough understanding of protocol-oriented programming and how to utilize it to build powerful, practical applications.

  • Angular 2 By Example

    Angular 2 by Example

    Angular 2 will help you build faster, more efficient, and more flexible cross-platform applications. This book shows you how to build three apps with varying degrees of complexity. In addition to this, you will learn about testability and the framework constructs Angular provides to effectively test your app. The book concludes by providing you with practical advice and useful tips that will come in handy as you build more and more apps with Angular.

  • Learning Vuejs

    Learning Vue.js 2

    Vue.js is one of the latest new frameworks to have piqued the interest of web developers due to its reactivity, reusable components, and ease of use. This book shows developers how to leverage its features to build high-performing, reactive web interfaces with Vue.js. From the initial structuring to full deployment, this book provides step-by-step guidance to developing an interactive web interface from scratch with Vue.js. By the time you finish this book you will have built, tested, and deployed a complete reactive application in Vue.js from scratch.

Start Learning With a Yearly Subscription

Subscribe to Envato Tuts+ for access to our library of hundreds of eBooks. With a Yearly subscription, you can download up to five eBooks per month, while the Yearly Pro subscription gives you unlimited access.

You can also build on your newfound knowledge by using some of the fantastic code scripts and plugins on Envato Market.


Source: Nettuts Web Development

The 5 Best IDEs for WordPress Development (And Why)

I’ve been developing with WordPress for around ten years now and, during that time, have used my fair share of Integrated Development Environments (IDEs). There’s certainly no shortage of choice these days, with literally dozens of different editors/IDEs available. (We’ll come to the distinction between an IDE and an editor shortly.)

Some IDEs are free, others commercial. Some are pretty basic by default, while others do almost everything you want right out of the box. This abundance of choice is great as it means you’re almost certain to find one that suits the way you work and includes just the right set of features you’re looking for.

Which IDE you end up using for a particular project is largely a personal choice. If you’re used to using the same IDE for every project and it works for you then you may see no reason to use an alternative. However, it may well pay off trying out an alternative once in a while. What have you got to lose? If it results in a workflow boost then it’s definitely worth your while!

If you’re new to coding in WordPress then it can be a little daunting deciding which IDEs to take a look at. Too much choice can initially seem like a disadvantage. In this article, I’ll hopefully help make this choice a little easier by covering five of the top web development IDEs currently available.

In no particular order, these are:

  • PhpStorm
  • Sublime Text 3
  • Atom
  • Coda 2
  • NetBeans

Soon we’ll take a closer look at each one of our five IDEs in turn, to see how they can help you develop WordPress based projects. But first, let’s find out what exactly what we mean by an IDE.

What’s an IDE Anyway?

According to Wikipedia, an IDE is defined as:

An integrated development environment (IDE) is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of a source code editor, build automation tools and a debugger.

Breaking this down, this basically means an IDE is a programming environment you can use to develop software without having to leave the interface. Look at it as a Swiss army knife of software development! Everything you need is just there, on hand, to help you get the job done.

Unlike most editors, an IDE usually has support for full projects rather than being able to deal with individual source code files. Even if an editor is capable of editing more than one file, it may not support creating a project file that encompasses an entire folder full of files, together with settings specific to that project. These project settings can include references to external software libraries, editor setup, version control, and debugging preferences.

Deciding which IDE to use is very subjective as it really depends on the features you’re looking for, but some of the features you might expect to find in a full IDE could include:

  • Multiple language support (PHP, JS, CSS, HTML)
  • Code completion
  • Refactoring
  • Linting
  • Debugger
  • Build automation
  • SVN/Git integration
  • Code sniffing
  • Code highlight
  • Compiler
  • Interpreter
  • Database Management/Editing

There aren’t any hard and fast rules as to what defines an IDE exactly. And if you asked a dozen different developers for their must-have IDE features, you’d likely get widely varying responses. The more features from the above list that are built in to an application, or available as an add-on, the closer it comes to being an IDE.

You may have noticed that some of the ‘IDEs’ we’ll be covering in this tutorial aren’t really IDEs at all, at first glance, but are editors masquerading as IDEs. So why include them at all in our list? Well, these particular editors have become extremely popular for web development and have strong user communities behind them which have driven forward an entire array of packages, extensions, and add-ons that actually go a long way to transforming them from just editors into very usable IDEs.

Think of them as ‘lite’ IDEs. Fast, robust, and highly configurable. Remember our Swiss army knife analogy from earlier? I think it’s even more applicable here! Sublime Text 3, Coda 2, and Atom are excellent examples of these types of IDEs. They aren’t traditional IDEs, but they can fit the bill beautifully when customised correctly.

There can be advantages to choosing a lightweight editor over a fully featured traditional IDE. Typically, you’d expect them to run open and run quicker as they are smaller applications and have less processing overheads. You’ll know what I mean if you’ve ever opened an IDE with a large project and you have to wait a while for the application to open and index all the files before you can start editing!

Compare this with a ‘lighter’ editor with only the features added that you need. This results in an IDE that doesn’t contain lots of functionality that you might never use. This helps keep your development setup light and fast. If you’re on a very fast machine, though, you may not notice too much difference in day-to-day development between a full IDE and a carefully configured editor. However, if you don’t have that luxury, then IDE performance could be a very important factor in your day-to-day development.

For these reasons, we decided to mix the list up somewhat and include both fully fledged and ‘lite’ IDEs which could appeal to WordPress developers with a wide range of expectations and requirements.

Let’s kick off our IDE tour by looking at PhpStorm.

PhpStorm

PhpStorm

PhpStorm is a commercial IDE from JetBrains, and it boasts an impressive array of features out of the box. One instantly attractive feature of PhpStorm is its support for WordPress development without the need for add-ons. PhpStorm automatically detects if your existing project is WordPress based. There’s even a built-in WordPress Plugin project type to help get you started developing plugins more easily!

With WordPress supported in your project, you have full access to code completion for all the built-in WordPress functions, plus action and filter hook code completion! You can easily jump to function definitions and usages of particular functions, which is very useful. PhpStorm has the best WordPress support out of all the IDEs covered in our review.

For a new user, though, the sheer number of features available in PhpStorm could make it seem a little daunting to begin with. It’s worth persevering with, though, as PhpStorm has excellent documentation and video tutorials available via the PhpStorm website.

Because PhpStorm is so feature rich, it can take a while to load, especially for WordPress projects as there are hundreds of files to index for the code completion features to work properly. However, once fully loaded, PhpStorm feels pretty responsive when editing files, with no noticeable lags. One noticeable thing about PhpStorm is how regularly it’s updated with bug fixes and new features. Even though it has been around since 2009, PhpStorm still has a strong release cycle, which is very encouraging. You just feel that PhpStorm will be around for years to come.

And don’t be put off by the name—PhpStorm isn’t just for PHP development (it has full support for PHP 7, by the way). It also has excellent built-in support for HTML, JavaScript, and CSS, which are all essential to modern WordPress development!

PhpStorm Details:

  • Website: https://www.jetbrains.com/phpstorm/
  • Commercial: Yes (Free 30-day trial available)
  • Initial Release: 2009
  • Regularly Updated: Yes
  • Extensions Supported: Yes – Plugins
  • Written In: Java
  • Cross-platform Support: Yes

Sublime Text 3

Sublime Text 3

Next on our list is Sublime Text 3, developed by Jon Skinner. It’s proven to be a very solid choice amongst web development professionals. Over the years, it has built up a significant following with its powerful, slick, and very fast user interface. It is also well known for being extremely stable and can handle very large files with ease, which other editors have been known to struggle with.

Interestingly, as popular as it is, Sublime Text 3 hasn’t seen a major release for a few years now. Although it is regularly updated, these mostly contain bug fixes along with minor enhancements and new features. At the time of writing, Sublime Text 3 is still currently in beta, but it was first initially released as a beta in 2013! And there isn’t currently any news on a new major release.

On startup, Sublime Text 3 is very quick to launch. In fact, it is almost instantaneous. It runs very fast too, with no lags or glitches, which makes for an extremely smooth and productive editing experience. It’s fairly minimalist out of the box and features a package manager to install add-ons (written in Python) without the need to restart Sublime Text in most cases (which is a nice touch).

As mentioned above, it handles large file sizes extremely well and is very robust, which means it is not prone to crashing. There’s a vast array of powerful add-ons (called packages) that make Sublime Text very flexible and versatile too. These include packages specific to WordPress development. There’s no denying that Sublime Text 3 is a sheer pleasure to use.

You can also find a large amount of written tutorials and video tutorials on Sublime Text 3, which are mostly up to date. This seems to prove that Sublime Text 3 is still very popular and widely used by many web developers on a day-to-day basis, which is a testament to the quality of this fantastic little editor.

Even though Sublime Text is still currently very popular, it could possibly start to lose ground over the next couple of years. However, if the Sublime Text 3 package library continues to flourish then the lack of a major release may not be important in the short term.

You could certainly do a lot worse than give Sublime Text 3 a try. You can evaluate it for free for an unspecified amount of time.

Sublime Text 3 Details:

  • Website: https://www.sublimetext.com/
  • Commercial: Free to evaluate (license required for continued use)
  • Initial Release: 2008
  • Regularly Updated: No
  • Extensions Supported: Yes – Packages
  • Written In: C++, Python
  • Cross-platform Support: Yes

Atom

Atom

Built by GitHub, Atom is the new kid on the block out of all the IDEs in our review. Released in 2014, it’s one of the most popular editors around at the moment and has a rapidly growing user community.

This popularity could be due, at least in part, to the fact that Atom is open source and entirely community driven. Contributing to Atom is a similar process to WordPress in that anyone can contribute to core development, as long as the guidelines are adhered to. And because Atom is publicly hosted on GitHub, contributing is very easy if you’re familiar with Git repositories.

Atom also has a huge add-on library, with well over 6,000 currently available on the official Atom packages page. This means you have a better chance of finding a package to do most things you require. There are a range of packages that make WordPress specific development a breeze too.

Similar to Sublime Text, Atom has full support for projects as well as individual file editing. And there is built-in support for embedded Git control, which isn’t surprising as it’s developed by GitHub!

It’s quite basic out of the box, but then again so is Sublime Text 3 until you start configuring it. Updates are released on a regular basis, but you’d expect that from a relatively new editor.

Some users have reported experiencing slow load time and patchy performance when editing, especially when dealing with large file sizes. Whether this is anything to do with Atom being developed in JavaScript is debatable. By contrast, Sublime Text is developed in C++ which runs very fast natively. Only time will tell if future versions of Atom can address these issues. It’s worth remembering, though, that the Atom codebase is still relatively young and has plenty of time to mature.

Overall, Atom is a great little editor that you can easily configure for WordPress development. It’s not surprising that Atom has gained so much traction already, and it will be really interesting to see how it matures over the next couple of years. It’s definitely one to keep your eye on!

Atom Details:

  • Website: https://atom.io/
  • Commercial: No (100% free)
  • Initial Release: 2014
  • Regularly Updated: Yes
  • Extensions Supported: Yes (Packages)
  • Written In: JavaScript
  • Cross-platform Support: Yes

Coda 2

Coda 2

Coda was first released in 2007, just one year ahead of Sublime Text. It’s had a very strong following over the years, sharing much of the professional web development market with Sublime Text on Mac computers. This is the main drawback with Coda—even ten years after the initial release, there’s still no Windows version available. This is the only editor in our review that isn’t cross-platform compatible.

Has this had a negative impact on its popularity? That’s difficult to tell, but it’s relatively rare these days to find web development applications that are Mac (or Windows) only. This would be a shame, though, as it’s a great editor. Editor features include a built-in terminal and source control client, as well as an FTP client and built-in MySQL editor. Coda 2 also supports plugins to extend functionality, including plugins specific to WordPress development. However, it’s not clear how regularly these WordPress add-ons are updated. It could affect the usefulness of the editor if they were to fall too far behind what other editor add-ons can offer.

Although Coda 2 is regularly updated, these are mainly bug fixes, and there hasn’t been a major release for a few years now. Coda 3 looks to be some way off, judging by this response to a user request in 2015. However, it’s important to remember that this isn’t necessarily anything to worry about. Sublime Text 3 is still officially in beta(!) and that’s currently still very popular.

Make no mistake, Coda 2 is a very good choice for a code editor. It may be starting to show its age a little, but I’d still definitely recommend checking it out before you make a final decision on which IDE you choose. Especially if you’re a macOS user!

Coda 2 Details:

  • Website: [https://panic.com/coda/]
  • Commercial: Yes (Free 7 day trial)
  • Initial Release: 2007
  • Regularly Updated: Yes
  • Extensions Supported: Yes – Plugins
  • Written In: (Unknown)
  • Cross-platform Support: No

NetBeans

Netbeans

NetBeans has been around a long time now (since the mid-1990s) but is still flourishing and able to compete with newer IDEs. Like PhpStorm, it’s developed in Java and is available for multiple platforms. The core NetBeans application is comprised of a set of ‘modules’ to add features to the IDE to aid web development.

NetBeans has been a strong favourite among web developers for many years as one of the most fully featured IDEs available. Its main competition during this time was from applications such as Dreamweaver, which is still in active development by Adobe but is nowhere near as popular as it once was. So why is NetBeans still going strong?

Being developed in Java meant that it was cross-platform compatible from day one, and being free makes it attractive to a much wider audience and means it gets plenty of recommendations from people who have used it for years. And it’s not surprising that it has a very large user community due to being around for over 20 years!

NetBeans works well with WordPress projects. You get the usual code hinting and highlighting, plus full code navigation, but you also get a powerful debugger, which is pretty impressive for a 100% free product. There are a whole range of add-ons for closer integration with WordPress, which will make developing themes and plugins much easier.

Updates for NetBeans seem to have slowed somewhat over the last couple of years, with only one update per year since 2014. However, a major release (NetBeans 9) is slated for July 2017 to coincide with the release of JDK9. NetBeans also has full support for PHP 7 since version 8.2, so if you need to develop against the latest version of PHP then NetBeans has you covered.

NetBeans Details:

  • Website: https://netbeans.org/
  • Commercial: No (Free)
  • Initial Release: 1996 (original name Xelfi)
  • Regularly Updated: Yes
  • Extensions Supported: Yes – Modules
  • Written In: Java
  • Cross-platform Support: Yes

Other IDEs And Editors For WordPress Development

As I mentioned in the introduction, there are many other IDEs you can use for development work. You don’t just have to limit yourself to the ones covered in this tutorial. Some of the others you could take a look at are:

Conclusion

In this tutorial, we’ve looked at five popular editors/IDEs for web development, and specifically WordPress development. It really boils down to your particular needs. If you want to maintain a ‘lite’ editor experience then using applications such as Coda 2, Atom, or Sublime Text 3 could be a good choice as you can configure them to only include the features you need.

There’s no denying PhpStorm’s feature set—it’s truly impressive. But not everyone would need all that functionality straight away. In fact, beginner developers may be put off by the huge array of features just waiting to be used. NetBeans has been around for over 20 years and has the most mature codebase of the IDEs in our review, which makes that a solid choice too.

What’s your favorite IDE for WordPress development? And what features are essential to you in your daily workflow? If you use one of the IDEs we’ve reviewed in this article then what do you love about it? Let us know in the comments below.


Source: Nettuts Web Development

New Course: How to Hack Your Own App

Why would you want to hack your own app? To find the security flaws before someone else does—and before your users’ data is compromised. 

In our new course, How to Hack Your Own App, you’ll learn how to find common security vulnerabilities using a web proxy scanner. Most importantly, you’ll get pointers from security expert Tanya Janca on how to start addressing the issues that you find!

OWASP screen from Tuts course on hacking your own app

You can take our new course straight away with a free 10-day trial of our monthly subscription. If you decide to continue, it costs just $15 a month, and you’ll get access to hundreds of courses, with new ones added every week.

 

If you need more resources, try some of the security plugins and scripts over on CodeCanyon!


Source: Nettuts Web Development

How to Install Yii on Windows or a Mac

Final product image
What You’ll Be Creating

Want to know more about Yii? Read Introduction to the Yii Framework and follow our Yii Programming series.

Welcome

In today’s tutorial, we’ll explain how to install Yii in a local development environment for both Windows and macOS. For the Windows guide, we’ll rely on WAMP Server, a Windows web development environment for Apache, PHP and Mac, and for the Mac guide, we’ll use its cousin, MAMP. Although Rod uses WAMP in today’s tutorial, there is also a Windows version of MAMP.

I’m writing the Mac portion of this guide, and my colleague Rod Ussing is writing the Windows side. I met Rod in high school in California at my second programming job, a very large hexadecimal number in years ago. He still uses Windows, but after eight years of working at Microsoft and tiring of rebooting the system to restart Outlook, I left for macOS

What Is Yii?

Yii is an incredibly reliable, well-designed, high-performing framework for PHP, as Rails is for Ruby and similar to Laravel. If you’re wondering if you can build real-world applications in Yii, check out Meeting Planner and our Building Your Startup series.

I love coding in Yii. Everything is faster and easier for me. And it’s relatively straightforward as far as frameworks go (that’s me throwing shade at Rails).

We’ll start with the basics of what’s unique installing Yii in macOS, and then move on to Windows. As what’s needed to complete the installation on each platform converges, we’ll describe the remaining instructions in a unified form for both platforms. 

Choosing Between Yii Basic and Yii Advanced

Yii Basic is the simplest form of Yii. You can build all kinds of applications with it, but it’s best for single tier, e.g. one customer facing side.

Here’s the directory structure of a Yii Basic application with just a set of directories for a single application:

The Yii 2 Advanced Project Template is best for developing complex Web applications with multiple tiers, such as front end, back end, and console, each of which is a separate Yii application. For example, administrative sites can run in the back end, and cron tasks can run in the console environment.

In contrast, here is the directory structure for a Yii Advanced application with multiple tiers:

Each tier is its own site, but they can easily share code and a common database if desired. I use this template in our startup series. Yii Advanced also provides built-in configuration support for different environments, making team development easier.

Preparing macOS for Yii

I’ve been coding in Yii on macOS for several years now. Sure, there are lots of different ways to run an Apache, MySQL, PHP environment on a Mac, but I prefer MAMP.

Installing MAMP

Install Yii on Windows or a Mac - MAMP Website Home Page

Basically, just visit the MAMP website and download the macOS package:

Install Yii on Windows or a Mac - MAMP Downloads Page

Once downloaded, you can drag the package to the Applications folder and double-click to launch MAMP. This will display a MAMP window:

Install Yii on Windows or a Mac - MAMP Window

Configuring MAMP

Click Preferences to configure the ports you want to the server on (I use 8888 for Apache):

Install Yii on Windows or a Mac - MAMP Preferences Ports Configuration

Click Web Server to review or change the directory of your server. I use Apache locally:

Install Yii on Windows or a Mac - MAMP Preferences Web Server Configuration

Installing Composer on macOS

Yii2 requires Composer, a popular dependency manager for PHP. If you don’t already have Composer installed, do the following:

Then, use Composer to install Yii2. The installation request requires that you use your own GitHub account credentials; sign up if you don’t have an account.

As Rod describes further below, installing Yii requires the composer asset plugin:

He recommends setting up an account with GitHub and configuring an access token. The reason for this is that during the installation of Yii, the number of requests may exceed the GitHub API rate limit, and Composer may stop and ask for your GitHub login credentials to obtain a GitHub API access token during the installation. 

When ready, you can install Yii. We’ll use Yii basic and install it in the ~/sites/hello directory:

Then, create a symlink for MAMP to your Sites app directory:

If you decide to install Yii Advanced, then it may help to activate and customize your virtual host file:

Below, I’ve configured frontend.dev and backend.dev to map to a Yii Advanced install in the ~/sites/yiiplus directory which has a symbolic link in /Applications/MAMP.

If you decide to use Yii Advanced, I encourage you to also check out my tutorial on this which offers more details.

Those are the platform-specific steps for macOS. Now let’s look at preparing for Yii on Windows. Later, we’ll return to finish the configurations with steps that work for both platforms. If you’re strictly a macOS user, jump ahead to the Completing the Yii Configuration section.

Preparing Windows for Yii

For Yii on Windows, we’re going to use WAMP. To begin, you’ll need to download and configure WAMP on your Windows computer. For this tutorial, we will be installing WAMP on your local computer (which the server will address as localhost). If you wish to install on a production Windows server, you will need to contact your provider for server details and follow the recommendations for installing and configuring WAMP Server or an alternative Apache, MySQL, PHP stack for that environment.

Installing WAMP

Install Yii on Windows or a Mac - WAMPSERVER Home Page

As the focus of this tutorial is on installing Yii, we suggest you consult one of the many excellent existing tutorials that cover installing WAMP; you will be surprised how easy it is. As it’s also a PHP application, the WordPress guide to installing WAMP is a good starting point.

Once we have installed and configured WAMP, we need to install Composer, which is a dependency manager and installer for PHP projects. This will enable us to get started with our Yii installation.

Installing Composer on Windows

Although you can download Yii packages from GitHub, in this tutorial we’re using Composer to install it. If you’re not familiar with Composer, you can learn more in this tutorial.

First let’s go to GitHub to download and install the latest version of Composer-setup.exe, which at this time is v4.5.0.

Once the install is complete, it is a good idea to log off and log on again to be sure all files are updated [Jeff here: or buy a Mac].

You can check your install by opening the Command prompt and going to:

Enter the following command:

The version info for Composer should then be displayed, something like:

Install Composer Asset Plugin

In order to manage your project assets in the Composer .json, without having to install NPM or Bower, you will need to make sure Composer has all the packages it needs by running the install command for the Composer Assets plugin.

Open the command prompt on Windows and navigate to where your PHP folder is located. On this install, PHP is located in the directory wamp64bin and it is PHP version 7.0.10, so we type:

Then type the following command:

Keep in mind that software changes, so always be sure to check that you are working with the most current stable version. Be careful with betas because if you get too far out on the bleeding edge, things might start to break.

For the most current versions of Composer and Composer Asset Plugin:

Configuring WAMP for Your Yii Application

Now, let’s configure WAMP for Yii. Change your directory to the WAMP installationwww for this installation:

In this directory, we will create a new directory named Yii Basic by typing:

This is where we are going to install Yii Basic. You could skip this step and install Yii straight into the www directory, but creating a clearly named directory avoids confusion, especially if you plan to install both Yii Basic and Yii advanced templates.

In the new yii-basic directory, we run the following command to install the Yii Basic Template:

We can verify Yii by navigating to the “Basic” folder in the directory you created:

Now we type in the command:

This will start up Yii using WAMP’s PHP engine.

Configuring the Host File in Windows

If you want to customize the local browser addresses for your site, or refer distinctly to the front end and back end of the Yii-Advanced site, you’ll need to do a bit more.

Either using the text editor’s Open File dropdown or by navigating directly in Windows Explorer, go to the file:

We are looking for the section that reads:

In preparation for Yii-Advanced’s multiple sites, let’s add one for frontend and one for backend:

It will look like this:

Install Yii on Windows or a Mac - Windows Host Config

You can find more on finding and setting up your Windows Host file here.

Enabling Virtual Hosts in the httpd.conf File

It is a good idea to check that Virtual Hosts are enabled in the Apache httpd.conf file.

Be very careful when editing the httpd.conf file—make a copy before you start, and be sure you understand what you are doing before you make edits, otherwise you can easily wreck your WAMP server. [Jeff here, sounds like Rod is speaking from experience.]

To find httpd.conf, type:

I like this guide for a more detailed explanation of editing of httpd.conf to enable functions relating to Virtual Hosts in Apache and configuring Virtual Hosts on WAMP.

Configure Virtual Hosts

We now need to configure our Apache Virtual Hosts. Using our text editor menu or Windows Explorer, we will navigate to the following directory:

There should already be a Virtual Host for localhost, so now we need to add Virtual Hosts for Yii frontend and Yii backend. I recommend that you type the name above each Virtual Host to avoid confusion. (Don’t forget to comment out the name!)

i.e. #Frontend

The Virtual Host config file should look something like this. 

In this example, we installed Yii Advanced into c:/wamp64/www/yii-advanced and created an application named yii-application. It’s also okay to install Yii into www so your path could read more simply c:/wamp64/www/myapp/frontend/web.

Install Yii on Windows or a Mac - Windows Virtual Host Config

Pay close attention to the DocumentRoot and Directory lines. They must both contain the complete pathway to the Yii application directory all the way to the “web” file that is located within the frontend and backend directories respectively. The content of DocumentRoot and Directory is identical except that the path for Directory is contained in quotation marks.

Installing the Yii-Advanced Template for Windows

To install the Yii advanced template, let’s return to the wamp64www directory:

Now we will create a new directory named yii-advanced:

In the new directory, we run the following command, which will install the Yii Advanced template:

Install Yii on Windows or a Mac - Composer install Yii-Advanced

So far, the installation of Yii Basic and Yii Advanced has been the same. Now we will need to add a few more steps to get your Yii Advanced Template ready for action.

Completing the Yii Configuration

Steps for Both Windows and Mac

Creating the MySQL Database

Assuming PHPmyAdmin is installed on your WAMP server (it’s included with MAMP), you can actually create the database via the PHPmyAdmin GUI, but we are going to get hands on and use the SQL command line, which honestly does not take much more effort.

In the Windows command line, navigate to the MySQL folder by typing:

You can also do this from anywhere as long as WAMP or MAMP is in your local environment path.

Then, for both Mac and Windows, type:

This will bring us to the mysql command line. Now we will execute the following command in SQL:

(You can name the database whatever you want, provided you make sure to use the appropriate name throughout the rest of the process.)

Now we will create a username and password for this database by typing the following SQL commands:

You will now leave MySQL and be returned to the console command line.

Keep the database username and password on hand as we will need it to set up the PHP config file (common/config/main-local.php), which enables Yii to communicate safely with MySQL.

Initializing the Yii Advanced Application

This is unnecessary for Yii-basic installations.

To initialize Yii advanced, we will need to navigate to the Yii-Advanced application folder. In this case, that would be:

Then type init:

This will start the initialization script which will ask whether you wish to initialize Yii for a development or production environment; most likely it will look like this:

For the purpose of this tutorial, we will be working in a development environment, so type in 0 and hit enter, and then type “yes” (without quotes) when prompted and the initialization will complete.

We are almost done—all that remains now are a few config steps, and you can get to work programming with Yii.

Install Yii on Windows or a Mac - Yii Init Results

Updating the Yii Configuration Settings

For Yii-basic, you’ll be editing /yii-basic/config/db.ini. For, Yii-advanced, you’ll be editing /yii-advanced/common/config/main-local.php.

In order to edit this file, we will need to use a text editor. Atom is a great choice that will serve you well as you get into more advanced coding.

To open the config file, either use the Open File dropdown in the text editor or navigate directly to the config file using Windows Explorer and right click Open With and select your text editor. (In Windows, you may need to run text editor as admin.)

The following example from the install we are using today illustrates this process. Keep in mind that you may be using a different drive designation and have a slightly different path depending on what you named your folders.

The config file should look something like this:

Install Yii on Windows or a Mac - Yii config main-local ini file

Remember to enter the same username and password you used to set up your Yii MySQL database, otherwise Yii and MySQL will not play nice!

And please don’t even think about using your database’s root username and password in the config file! [Jeff here … really, don’t.]

Using the Yii Migration Tool

Yii Advanced has its own migrations. Now that MySQL is set up, we will need some tables. The Yii migrations create tables and schemas in your MySQL database programmatically.

To start the Yii Migration tool in Windows, we need to go to our Yii Installation directory by typing:

Again, you can choose to install it without the parent directory that Rod created for this demo. For example, for MAMP, I’m using:

Now type the following command:

In a moment you will be asked if you want to "Apply the above migration?"

Type Yes and hit return. If all goes well, we will get a message that Yii migrated successfully.

Install Yii on Windows or a Mac - Yii Migration results

Visiting Your Yii Website

Now for the moment of truth. When you visit localhost:8888 in your browser, you should see:

Install Yii on Windows or a Mac - Your Yii Website Congrtulations Default Home Page

For Yii Advanced, you may need to try frontend.dev or include the frontend or backend site, e.g. localhost:8888/frontend. If you don’t enable your host file, you can access Yii directly via the path, localhost:8888/web.

If you installed the advanced template, go to the Signup link and input a username, the email address you wish to use, and a password. 

Do not use your MySQL password (the one you entered into the PHP config file). This is the Yii user account database with new usernames and passwords.

Your first user registration will also be the Yii application’s administrative user with access to everything.

Now that you are signed up, type into the browser:

backend.dev

You should get an admin login screen where you can enter your new username and password:

The Yii Login Screen

This will take you right back to the above Yii “Congratulations” page but as an authenticated user.

Now with all the congratulations going around, why not congratulate yourself as you have just successfully installed Yii. Nicely done. [Jeff here, if you did this on Windows, go buy a Mac and try it on there.]

In Closing

I hope our tutorial today helps you get started with Yii. Rod and I enjoyed writing this together.

Watch for upcoming tutorials in our Programming with Yii2 series as we continue diving into different aspects of the framework. Be sure to check out our Building Your Startup With PHP series which is using Yii2’s advanced template as we build a real-world application.

How to Program With Yii’s Getting Started episode does a great job of going into detail about setting up Yii basic and a production Linux server.

If you’d like to know when the next Yii2 tutorial arrives, follow me @reifman on Twitter or check my instructor page. My instructor page will include all the articles from this series as soon as they are published. 

Related Links


Source: Nettuts Web Development

What Is a JavaScript Operator?

 

In JavaScript, special characters like + and -, punctuation and more can be used in different combinations to perform operations. In this video tutorial from my JavaScript Fundamentals course, you’ll see how JavaScript operators work. 

You’ll learn about the behaviour of some of the more basic operators like arithmetic operators, assignment operators, and comparison operators.

JavaScript operators example

Watch the Full Course

This was just one of 53 video lessons from the course JavaScript Fundamentals. It’s a comprehensive course that’s ideal for a beginner who wants to learn JavaScript from the ground up.

In the full course, we start at the very beginning and cover everything about the language that a beginner needs to know. Maybe you’ve never programmed anything before, or maybe you’re coming to JavaScript from another language. Whatever your situation, we’ll go through everything you need to get up and running with one of the most popular and dynamic languages in use today. 

Another great resource for aspiring JavaScript developers is the huge collection of JavaScript plugins over on Envato Market, where you can find ready-made items to speed up your development work and provide great functionality on your websites.


Source: Nettuts Web Development