## Step 4: Creating default.php

At this point, we have created our manifest file with paramaters, took those same parameters and turned them into variables. In this step, we are going to use those variables in our template file. The template file will render all of our HTML for the module. Edit default.php from your tmpl folder and add the following snippets:

### Copyright Notice and Restricted Access Script

It is recommended that you add the Copyright Notice and Restricted Access line to your PHP files.

For this tutorial, we will need the embed code from Mixcloud. Here is an example on getting the code . Our module's purpose is to make the code reusable without having to get the embed each time we want to create or modify a Mixcloud Widget on our site. The default embed code comes with some extra information about the widget content which we don't need. So for this tutorial, I have stripped it down to just the embed script. Paste this embed code to your default.php file.

### Making the Script Configurable

If we wanted to embed one widget permanently, we could just zip up the module right now. However we don't, so we are going to replace some of the attributes with our module params . We're going to change the width, height, color and feed. Paste the following snippet over your embed script.

Take note of how we are just calling the variables from our controller file.

## Step 5: Creating Language Files

In step one, you might have noticed that we created a folder, called language, with two files. Then, in step two, we added some translatable text. In this section, we are going to translate that text to English. Insert the following snippet to the ini files, en-GB.mod_mixcloud_widget.sys.ini and en-GB.mod_mixcloud_widget.ini.

If you look closely, you will notice that the text I used for the parameters now have an English translation. You can add other files and create translations in other languages!

## Step 6: Packaging the Module

After following all the steps thoroughly, your module is now installable, but we'd like to make a checklist of things to do before installation and distribution.

### Add index.html to Folders

It is recommended that you add a index.html file to each folder. This file, as mentioned previously, stops users from viewing the contents of a module folder directly in a browser. Add the following snippet to your files:

### Comparing our File Structure to the Manifest File

At this stage, it is recommended that you look at the files and folder defined in your manifest file, and make sure they exist in your module folder. Any file that does not exist can stop the installer from installing files, or, it may throw an error.

### Packaging

After our little checklist, we can package the module into a zip file, and install it.

By navigating to the modules manager, and selecting the module, you can modify the paramaters with your desired width, height, color and song feed.

Enable the module and check to see if it operates the way that it should.

## Step 7: Submitting to JED

### Locating the Category

After registering to JED, one of the main things to note is that you cannot add an extension to multiple sections. So, choosing the appropriate section is very important. Find a suitable section by browsing the site then looking at the top left cornder you will see Submit Extension

### Filling Out the Details

Once you've chosen to submit an extension, there will be a form to fill in all the details about your submission. Review the screenshots below to see the different fields to be filled out, and read the instructions carefully.

### Success Image

Once all the appropriate fields and files have been submitted, you will see a message like the screenshot above; it will explain how many submissions are in the queue to be checked prior to yours.

## Conclusion

Now that you've learned how to create a Joomla module from a widget, go forth and code. With the basics of this tutorial, the same idea can be applied to Facebook plugins, Twitter widgets, Social bookmarkers, Youtube video embeds, and so much more. Happy Coding!