To achieve the functionality where the form data is submitted and stored in the database using CodeIgniter, we need to set up the necessary controllers, models, and views. Below is a detailed guide on how to implement this.
### Step 1: Update JavaScript (scripts.js)
The JavaScript file will handle form interactions and prepare data for submission to the server.
```javascript
$(document).ready(function() {
let index = 1;
let activeSection = null;
// Function to add an option based on type
function addOption(type, container) {
let optionIndex = container.children().length + 1;
let optionHtml;
if (type === 'multiple-choice' || type === 'checkboxes') {
optionHtml = `
';
let type = $(this).find('.custom-select').val();
let optionsContainer = $(this).find('.options-container');
if (type === 'multiple-choice') {
optionsContainer.find('.option').each(function() {
previewContent += `
`;
});
} else if (type === 'short-answer') {
previewContent += '';
} else if (type === 'paragraph') {
previewContent += '';
} else if (type === 'dropdown') {
let dropdownHtml = '';
previewContent += dropdownHtml;
}
previewContent += '
';
});
previewContent += `
`;
previewWindow.document.write(previewContent);
previewWindow.document.close();
});
// Event listener for clicking on a form section
$(document).on('click', '.form-section', function() {
$('.form-section').removeClass('active');
$(this).addClass('active');
activeSection = $(this);
positionAddSectionButton();
});
// Submit button click event to save data to the database
$(document).on('click', '#submit-btn', function() {
let formData = [];
// Iterate through each form section
$('.form-section').each(function() {
let sectionData = {
question: $(this).find('.untitled-question').val(),
type: $(this).find('.custom-select').val(),
required: $(this).find('.required-toggle').prop('checked') ? 1 : 0,
options: []
};
// Iterate through options if any
$(this).find('.option').each(function() {
sectionData.options.push($(this).find('.option-label').val());
});
formData.push(sectionData);
});
// Ajax call to submit data
$.ajax({
url: "",
type: "POST",
data: {
formData: formData
},
success: function(response) {
alert(response); // Handle response from server
}
});
});
// Initialize sortable feature for form sections
$('#form-container').sortable({
placeholder: 'ui-state-highlight',
start: function (event, ui) {
ui.placeholder.height(ui.item.height());
},
stop: function (event, ui) {
positionAddSectionButton();
}
});
$('#form-container').disableSelection();
});
```
### Step 2: Create Controllers and Models in CodeIgniter
#### 1. Controller: Form.php
```php
load->model('Form_model');
}
public function index() {
// Load view for form creation
$this->load->view('create_form');
}
public function submit_form_data() {
$formData = $this->input->post('formData');
// Example to get user ID (you should have this implemented in your authentication flow)
$userId = 1; // Replace with your actual user ID retrieval logic
// Insert form data into database using model
foreach ($formData as $section) {
$formId = $this->Form_model->insert_form($userId, $section['question']);
// Insert questions into database
$this->Form_model->insert_question($formId, $section['type'], $section['required']);
// Insert options into database if any
if (!empty($section['options'])) {
foreach ($section['options'] as $option) {
$this->Form_model->insert_option($formId, $option);
}
}
}
echo "Form data submitted successfully!";
}
}
?>
```
#### 2. Model: Form_model.php
```php
$userId,
'description' => $description,
'created_at' => date('Y-m-d H:i:s')
);
$this->db->insert('forms', $data);
return $this->db->insert_id();
}
public function insert_question($formId, $type, $required) {
// Insert question data
$data = array(
'form_id' => $formId,
'type' => $type,
'required' => $required,
'created_at' => date('Y-m-d H:i:s')
);
$this->db->insert('questions', $data);
}
public function insert_option($formId, $text) {
// Insert option data
$data = array(
'question_id' => $formId, // Assuming form ID here, adjust as per your structure
'text' => $text
);
$this->db->insert('options', $data);
}
}
?>
```
### Step 3: Create Views
#### 1. create_form.php (View for form creation)
```html
Google Form Clone
Untitled Form
```
### Step 4: Database Structure
Ensure your database tables (`users`, `forms`, `questions`, `options`) are set up according to your described structure:
- `users` table: id (primary key), username, email, password, created_at
- `forms` table: id (primary key), user_id (foreign key to users.id), description, created_at
- `questions` table: id (primary key), form_id (foreign key to forms.id), text, type, required, created_at
- `options` table: id (primary key), question_id (foreign key to questions.id), text
### Step 5: Configure CodeIgniter
Ensure your CodeIgniter configuration (`config/config.php` and `config/database.php`) is set up correctly with base URL, database connection settings, and any other necessary configurations.
### Step 6: Testing
- Access the form creation page (`http://yourdomain.com/form`) and create a form.
- Click on the "Submit" button to save the form data.
- Verify that the data is correctly saved in your database tables.
This setup assumes you have basic knowledge of CodeIgniter and have configured your environment correctly. Adjust paths (`base_url()`) and database configurations as per your setup.